/* ===================================
RESET
=================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  background: #0d0d0d;
  color: white;
}

/* ===================================
ANNOUNCEMENT BAR
=================================== */

.announcement-bar {
  background: #7a0000;
  color: white;
  text-align: center;
  padding: 8px 0;
  font-size: 14px;
  letter-spacing: 1px;
}
/* ================= NAVBAR ================= */

.nav {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.nav-inner {
  max-width: 1400px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 35px;
}
.nav {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  z-index: 1000;

  background: linear-gradient(
    to bottom,
    rgba(150, 0, 0, 0.95),
    rgba(90, 0, 0, 0.75),
    rgba(0, 0, 0, 0)
  );

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
/* LOGO */

.logo img {
  height: 80px;
}

/* MENU */

#nav-links {
  display: flex;
  align-items: center;
  gap: 38px;
}
#nav-links a:not(.order-btn) {
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  position: relative;
  padding-bottom: 6px;
}

/* hover underline */
#nav-links a:not(.order-btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 3px;
  background: #f4c06a;
  transition: 0.3s;
}

/* hover */
#nav-links a:not(.order-btn):hover::after {
  width: 100%;
}

/* active page */
#nav-links a.active::after {
  width: 100%;
}
/* ORDER BUTTON */

.order-btn {
  background: #2bb24c;
  color: white !important;
  padding: 12px 26px;
  border-radius: 40px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
/* ================= BODY BACKGROUND ================= */

body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;

  background-image: url("../assets/bg.jpg");

  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
/* HERO SECTION */

.hero {
  height: 620px;

  display: flex;
  align-items: center;

  padding-left: 100px;

  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.9) 30%,
      rgba(0, 0, 0, 0.65) 45%,
      rgba(0, 0, 0, 0.35) 55%,
      rgba(0, 0, 0, 0) 65%
    ),
    url("../assets/hero-bg.jpg");

  background-position: right center;

  /* IMPORTANT → prevents zoom */
  background-size: auto 100%;

  background-repeat: no-repeat;

  color: white;
}

/* INNER WRAPPER */

.hero-inner {
  max-width: 1200px;
  width: 100%;
}

/* TEXT AREA */

.hero-text {
  max-width: 520px;
}

/* TITLE */

.hero-title {
  font-family: "Playfair Display", serif;
  font-size: 64px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* SCRIPT TEXT */

.hero-script {
  font-family: "Great Vibes", cursive;
  font-size: 36px;
  color: #f4c06a;
  margin-bottom: 14px;
}

/* DESCRIPTION */

.hero-desc {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  color: #ddd;
  margin-bottom: 28px;
  line-height: 1.6;
}

/* BUTTONS */

.hero-buttons {
  display: flex;
  gap: 18px;
  margin-bottom: 35px;
}

.btn-order {
  background: #2ecc71;

  padding: 14px 34px;

  border-radius: 40px;

  color: white;

  font-family: "Poppins";

  font-weight: 600;

  text-decoration: none;

  transition: 0.25s;
}

.btn-order:hover {
  background: #27ae60;
}

.btn-menu {
  border: 2px solid #2ecc71;

  padding: 12px 30px;

  border-radius: 40px;

  color: white;

  font-family: "Poppins";

  font-weight: 600;

  text-decoration: none;

  transition: 0.25s;
}

.btn-menu:hover {
  background: #2ecc71;
}

/* INFO BAR */

.hero-info {
  display: flex;
  gap: 40px;

  font-family: "Poppins";
  font-size: 14px;
  color: #ddd;
}

.info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon {
  font-size: 18px;
}
/* HERO → BODY SMOOTH BLEND FIX */

.hero {
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 140px;

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.45) 40%,
    rgba(0, 0, 0, 0.75) 70%,
    #0e0e0e 100%
  );

  pointer-events: none;
}
.hero {
  position: relative;
  height: 650px;

  background:
    linear-gradient(
      to right,
      #0e0e0e 0%,
      rgba(14, 14, 14, 0.9) 25%,
      rgba(14, 14, 14, 0.6) 40%,
      rgba(14, 14, 14, 0.3) 55%,
      rgba(14, 14, 14, 0) 70%
    ),
    url("../assets/hero-bg.jpg");

  background-size: contain;
  background-position: right bottom;
  background-repeat: no-repeat;
}
/* HERO OVERLAY EXTEND FIX */

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

  background: linear-gradient(
    to right,
    rgba(14, 14, 14, 0.95) 0%,
    rgba(14, 14, 14, 0.85) 35%,
    rgba(14, 14, 14, 0.65) 55%,
    rgba(14, 14, 14, 0.35) 70%,
    rgba(14, 14, 14, 0) 85%
  );
}
/* HERO CONTENT ABOVE OVERLAY FIX */

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-buttons {
  position: relative;
  z-index: 2;
}

.hero-info {
  position: relative;
  z-index: 2;
}
/* HERO TEXT STYLE */

.hero h1 {
  font-family: "Playfair Display", serif;
  font-size: 64px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 10px;
}

.hero-subtitle {
  font-family: "Great Vibes", cursive;
  font-size: 34px;
  color: #f4c06a;
  margin-bottom: 15px;
}

.hero p {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  color: #dcdcdc;
  max-width: 520px;
  line-height: 1.6;
  margin-bottom: 30px;
}

/* HERO BUTTONS */

.hero-buttons {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.btn-primary {
  background: #2ecc71;
  color: white;
  padding: 14px 28px;
  border-radius: 40px;
  font-weight: 600;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
}

.btn-outline {
  border: 2px solid #2ecc71;
  color: white;
  padding: 12px 26px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
}

/* HERO INFO */

.hero-info {
  display: flex;
  gap: 40px;
  color: #f4c06a;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  margin-top: 10px;
}
/* HERO BUTTON ALIGNMENT FIX */

.hero-buttons {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 25px;
  margin-bottom: 25px;
}

/* ORDER ONLINE BUTTON */

.btn-gold {
  background: #22c55e;
  color: #fff;
  padding: 14px 34px;
  border-radius: 40px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
}

/* VIEW MENU BUTTON */

.btn-outline {
  border: 2px solid #22c55e;
  color: #fff;
  padding: 12px 34px;
  border-radius: 40px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

/* HOVER EFFECT */

.btn-gold:hover {
  background: #16a34a;
}

.btn-outline:hover {
  background: #22c55e;
}
/* HERO SECTION */

.hero {
  height: 620px;

  display: flex;
  align-items: center;

  padding-left: 100px;

  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.9) 30%,
      rgba(0, 0, 0, 0.65) 45%,
      rgba(0, 0, 0, 0.35) 55%,
      rgba(0, 0, 0, 0) 65%
    ),
    url("../assets/hero-bg.jpg");

  background-position: right center;

  /* IMPORTANT → prevents zoom */
  background-size: auto 100%;

  background-repeat: no-repeat;

  color: white;
}

/* INNER WRAPPER */

.hero-inner {
  max-width: 1200px;
  width: 100%;
}

/* TEXT AREA */

.hero-text {
  max-width: 520px;
}

/* TITLE */

.hero-title {
  font-family: "Playfair Display", serif;
  font-size: 64px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* SCRIPT TEXT */

.hero-script {
  font-family: "Great Vibes", cursive;
  font-size: 36px;
  color: #f4c06a;
  margin-bottom: 14px;
}

/* DESCRIPTION */

.hero-desc {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  color: #ddd;
  margin-bottom: 28px;
  line-height: 1.6;
}

/* BUTTONS */

.hero-buttons {
  display: flex;
  gap: 18px;
  margin-bottom: 35px;
}

.btn-order {
  background: #2ecc71;

  padding: 14px 34px;

  border-radius: 40px;

  color: white;

  font-family: "Poppins";

  font-weight: 600;

  text-decoration: none;

  transition: 0.25s;
}

.btn-order:hover {
  background: #27ae60;
}

.btn-menu {
  border: 2px solid #2ecc71;

  padding: 12px 30px;

  border-radius: 40px;

  color: white;

  font-family: "Poppins";

  font-weight: 600;

  text-decoration: none;

  transition: 0.25s;
}

.btn-menu:hover {
  background: #2ecc71;
}

/* INFO BAR */

.hero-info {
  display: flex;
  gap: 40px;

  font-family: "Poppins";
  font-size: 14px;
  color: #ddd;
}

.info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon {
  font-size: 18px;
}
/* HERO → BODY SMOOTH BLEND FIX */

.hero {
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 140px;

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.45) 40%,
    rgba(0, 0, 0, 0.75) 70%,
    #0e0e0e 100%
  );

  pointer-events: none;
}
.hero {
  position: relative;
  height: 650px;

  background:
    linear-gradient(
      to right,
      #0e0e0e 0%,
      rgba(14, 14, 14, 0.9) 25%,
      rgba(14, 14, 14, 0.6) 40%,
      rgba(14, 14, 14, 0.3) 55%,
      rgba(14, 14, 14, 0) 70%
    ),
    url("../assets/hero-bg.jpg");

  background-size: contain;
  background-position: right bottom;
  background-repeat: no-repeat;
}
/* HERO OVERLAY EXTEND FIX */

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

  background: linear-gradient(
    to right,
    rgba(14, 14, 14, 0.95) 0%,
    rgba(14, 14, 14, 0.85) 35%,
    rgba(14, 14, 14, 0.65) 55%,
    rgba(14, 14, 14, 0.35) 70%,
    rgba(14, 14, 14, 0) 85%
  );
}
/* HERO CONTENT ABOVE OVERLAY FIX */

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-buttons {
  position: relative;
  z-index: 2;
}

.hero-info {
  position: relative;
  z-index: 2;
}
/* HERO TEXT STYLE */

.hero h1 {
  font-family: "Playfair Display", serif;
  font-size: 64px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 10px;
}

.hero-subtitle {
  font-family: "Great Vibes", cursive;
  font-size: 34px;
  color: #f4c06a;
  margin-bottom: 15px;
}

.hero p {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  color: #dcdcdc;
  max-width: 520px;
  line-height: 1.6;
  margin-bottom: 30px;
}

/* HERO BUTTONS */

.hero-buttons {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.btn-primary {
  background: #2ecc71;
  color: white;
  padding: 14px 28px;
  border-radius: 40px;
  font-weight: 600;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
}

.btn-outline {
  border: 2px solid #2ecc71;
  color: white;
  padding: 12px 26px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
}

/* HERO INFO */

.hero-info {
  display: flex;
  gap: 40px;
  color: #f4c06a;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  margin-top: 10px;
}
/* HERO BUTTON ALIGNMENT FIX */

.hero-buttons {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 25px;
  margin-bottom: 25px;
}

/* ORDER ONLINE BUTTON */

.btn-gold {
  background: #22c55e;
  color: #fff;
  padding: 14px 34px;
  border-radius: 40px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
}

/* VIEW MENU BUTTON */

.btn-outline {
  border: 2px solid #22c55e;
  color: #fff;
  padding: 12px 34px;
  border-radius: 40px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

/* HOVER EFFECT */

.btn-gold:hover {
  background: #16a34a;
}

.btn-outline:hover {
  background: #22c55e;
}
/* ============================= */
/* EXPLORE MENU SECTION */
/* ============================= */
.explore-menu {
  padding: 60px 8%;
  background:
    linear-gradient(to bottom, rgba(14, 14, 14, 0.55), rgba(14, 14, 14, 0.55)),
    url("../assets/wood-bg.jpg");

  background-size: cover;
  background-position: center;
  text-align: center;
  color: white;
}
/* TITLE */

.explore-title {
  font-family: "Playfair Display", serif;
  font-size: 28px;
  letter-spacing: 2px;
  margin-bottom: 35px;
  position: relative;
}
/* EXPLORE MENU OVERLAY BLEND */

.explore-menu {
  position: relative;
}

.explore-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.35) 40%,
    rgba(0, 0, 0, 0.15) 70%,
    rgba(0, 0, 0, 0) 100%
  );

  pointer-events: none;
}

.explore-menu > * {
  position: relative;
  z-index: 2;
}
.explore-title:before,
.explore-title:after {
  content: "";
  width: 70px;
  height: 2px;
  background: #22c55e;
  display: inline-block;
  margin: 0 12px;
  vertical-align: middle;
}

/* ============================= */
/* MENU GRID */
/* ============================= */

.menu-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 15px;
}

/* ============================= */
/* MENU CARD */
/* ============================= */

.menu-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: 0.3s;
}

/* IMAGE */

.menu-card img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
  filter: brightness(1.05);
}

/* ============================= */
/* SOFT OVERLAY (BOTTOM ONLY) */
/* ============================= */

.menu-card:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 45%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);
  pointer-events: none;
}

/* ============================= */
/* CATEGORY TEXT */
/* ============================= */

.menu-card span {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 600;
  font-size: 14px;
  z-index: 2;
  color: white;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* ============================= */
/* HOVER EFFECT */
/* ============================= */

.menu-card:hover {
  transform: translateY(-5px);
}
/* FIX: lighten menu overlay */

.menu-card::after {
  height: 30% !important;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.18),
    transparent
  ) !important;
}
/* EXPLORE MENU OVERLAY (SLIGHTLY DARKER) */

.explore-menu {
  position: relative;
}

.explore-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.45) 40%,
    rgba(0, 0, 0, 0.25) 70%,
    rgba(0, 0, 0, 0.05) 100%
  );

  pointer-events: none;
}

.explore-menu > * {
  position: relative;
  z-index: 2;
}
/* EXPLORE MENU OVERLAY (A LITTLE MORE DARK) */

.explore-menu {
  position: relative;
}

.explore-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.55) 40%,
    rgba(0, 0, 0, 0.32) 70%,
    rgba(0, 0, 0, 0.08) 100%
  );

  pointer-events: none;
}

.explore-menu > * {
  position: relative;
  z-index: 2;
}
/* EXPLORE MENU OVERLAY (MORE DARK) */

.explore-menu {
  position: relative;
}

.explore-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.62) 40%,
    rgba(0, 0, 0, 0.4) 70%,
    rgba(0, 0, 0, 0.12) 100%
  );

  pointer-events: none;
}

.explore-menu > * {
  position: relative;
  z-index: 2;
}
/* MENU CARD */

.menu-card {
  position: relative;
  width: 125px;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: #141414;
  transition: 0.3s;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
}

/* IMAGE */

.menu-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

/* COLORED BOTTOM FADE */

.menu-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 65%;

  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(200, 40, 40, 0.65) 25%,
    rgba(0, 0, 0, 0.4) 45%,
    rgba(0, 0, 0, 0) 80%
  );
}

/* TEXT */

.menu-card span {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  z-index: 2;
}

/* HOVER */

.menu-card:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
}
.menu-card:nth-child(odd) {
  box-shadow: 0 10px 30px rgba(200, 30, 30, 0.4);
}

.menu-card:nth-child(even) {
  box-shadow: 0 10px 30px rgba(20, 150, 80, 0.4);
}
/* FIX: stronger red-green bottom glow */

.menu-card::after {
  height: 65% !important;

  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(180, 25, 25, 0.85) 25%,
    rgba(25, 140, 70, 0.65) 45%,
    rgba(0, 0, 0, 0) 80%
  ) !important;
}
/* ===== FIX: green bottom glow + text bottom ===== */

.menu-card::after {
  height: 70% !important;

  background: linear-gradient(
    to top,
    rgba(20, 120, 60, 0.95) 0%,
    rgba(30, 170, 80, 0.75) 30%,
    rgba(30, 170, 80, 0.35) 55%,
    rgba(0, 0, 0, 0) 80%
  ) !important;
}

/* TEXT POSITION */

.menu-card span {
  bottom: 6px !important;
  left: 50%;
  transform: translateX(-50%);
  font-size: 15px;
  font-weight: 600;
  color: white;
  z-index: 3;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.8);
}
/* FIX: green only at bottom */

.menu-card::after {
  height: 35% !important;

  background: linear-gradient(
    to top,
    rgba(25, 160, 80, 0.95) 0%,
    rgba(25, 160, 80, 0.65) 35%,
    rgba(25, 160, 80, 0.25) 60%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
}
/* FIX: text on gradient */

.menu-card span {
  position: absolute;
  bottom: 4px !important;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-size: 15px;
  font-weight: 600;
  color: white;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.9);
}

/* make sure gradient stays behind text */

.menu-card::after {
  z-index: 2;
}

.menu-card img {
  position: relative;
  z-index: 1;
}
/* ALTERNATE RED GREEN GRADIENT */

.menu-card:nth-child(odd)::after {
  background: linear-gradient(
    to top,
    rgba(200, 40, 40, 0.95) 0%,
    rgba(200, 40, 40, 0.6) 40%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
}

.menu-card:nth-child(even)::after {
  background: linear-gradient(
    to top,
    rgba(25, 160, 80, 0.95) 0%,
    rgba(25, 160, 80, 0.6) 40%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
}
/* ============================= */
/* MOBILE MENU SCROLL */
/* ============================= */

@media (max-width: 768px) {
  .menu-grid {
    display: flex;
    overflow-x: auto;

    gap: 14px;

    padding-bottom: 10px;

    scroll-snap-type: x mandatory;
  }

  /* hide ugly scrollbar */

  .menu-grid::-webkit-scrollbar {
    display: none;
  }

  .menu-card {
    min-width: 140px;
    flex: 0 0 auto;

    scroll-snap-align: start;
  }

  .menu-card img {
    height: 110px;
  }
}
/* ============================= */
/* WINGS SECTION */
/* ============================= */

.wings-section {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 80px 8%;

  background: #0e0e0e;

  overflow: hidden;

  color: white;
}

/* RED GLOW LEFT SIDE */

.wings-section::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 55%;
  height: 100%;

  background: linear-gradient(
    90deg,
    rgba(180, 20, 20, 0.95) 0%,
    rgba(120, 10, 10, 0.7) 40%,
    rgba(0, 0, 0, 0) 100%
  );

  pointer-events: none;
}

/* KEEP CONTENT ABOVE GLOW */

.wings-left,
.wings-right {
  position: relative;
  z-index: 2;
}

/* ============================= */
/* LEFT SIDE */
/* ============================= */

.wings-left {
  max-width: 420px;
}

.wings-left h4 {
  color: #f4c06a;

  font-family: "Playfair Display", serif;

  font-size: 24px;

  margin-bottom: 5px;
}

.wings-left h2 {
  font-family: "Playfair Display", serif;

  font-size: 50px;

  margin-bottom: 15px;
}

.wings-left p {
  color: #dcdcdc;

  margin-bottom: 25px;

  font-size: 15px;
}

/* BUTTON */

.wings-btn {
  background: #22c55e;

  padding: 14px 32px;

  border-radius: 40px;

  text-decoration: none;

  color: white;

  font-weight: 600;

  font-family: "Poppins";

  transition: 0.25s;
}

.wings-btn:hover {
  background: #16a34a;
}

/* ============================= */
/* RIGHT SIDE */
/* ============================= */

.wings-right {
  display: flex;

  align-items: center;

  gap: 40px;
}

/* WINGS IMAGE */

.wings-img {
  width: 320px;

  border-radius: 12px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* ============================= */
/* FLAVOR PILLS */
/* ============================= */

.flavor-list {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  max-width: 420px;
}

/* DEFAULT */

.flavor {
  padding: 10px 18px;

  border-radius: 30px;

  background: #1f1f1f;

  color: #fff;

  font-size: 14px;

  cursor: pointer;

  transition: 0.25s;
}

/* HOVER */

.flavor:hover {
  background: #2a2a2a;
}

/* ACTIVE */

.flavor.active {
  background: #c31b1b;
}

/* MORE BUTTON */

.flavor.more {
  background: #1f7a3b;
}

/* ============================= */
/* MOBILE VERSION */
/* ============================= */

@media (max-width: 900px) {
  .wings-section {
    flex-direction: column;

    text-align: center;

    gap: 40px;
  }

  .wings-right {
    flex-direction: column;
  }

  .wings-img {
    width: 260px;
  }

  .flavor-list {
    justify-content: center;
  }
}
/* Wings section background image */

.wings-section {
  background-image: url("../assets/wings.png"); /* apni image ka path */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 80px 8%;

  border-radius: 12px;

  position: relative;
}

/* Dark overlay for readability */

.wings-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.6) 40%,
    rgba(0, 0, 0, 0.2) 100%
  );

  border-radius: 12px;
}

/* Content above overlay */

.wings-section > * {
  position: relative;
  z-index: 2;
}
/* Fix wings background zoom */

.wings-section {
  background-size: contain !important; /* zoom remove */
  background-position: right center !important; /* image right shift */
  background-repeat: no-repeat;
}
/* Red glass gradient for wings section */

.wings-section {
  background-image:
    linear-gradient(
      90deg,
      rgba(120, 0, 0, 0.85) 0%,
      rgba(150, 0, 0, 0.65) 30%,
      rgba(0, 0, 0, 0.75) 60%,
      rgba(0, 0, 0, 0.9) 100%
    ),
    url("../assets/wings.png"); /* wings image path */

  background-size: contain;
  background-position: 90% center;
  background-repeat: no-repeat;
}
.wings-section {
  backdrop-filter: blur(2px);
}
.wings-section {
  background:
    linear-gradient(
      90deg,
      rgba(140, 0, 0, 0.45) 0%,
      rgba(140, 0, 0, 0.3) 25%,
      rgba(0, 0, 0, 0.2) 55%,
      rgba(0, 0, 0, 0.6) 100%
    ),
    url("../assets/wings.png");

  background-repeat: no-repeat;
  background-position: 85% center;
  background-size: contain;
}
/* Center the flavor buttons */

.flavors {
  display: flex;
  flex-wrap: wrap;

  justify-content: center; /* center horizontally */
  align-items: center;

  gap: 12px;

  margin-top: 25px;
}
/* Wider + darker red gradient */

.wings-section {
  background:
    linear-gradient(
      90deg,
      rgba(150, 0, 0, 0.7) 0%,
      /* dark red */ rgba(150, 0, 0, 0.55) 30%,
      /* red spread */ rgba(150, 0, 0, 0.35) 50%,
      /* fade towards image */ rgba(0, 0, 0, 0.45) 70%,
      /* dark blend */ rgba(0, 0, 0, 0.75) 100% /* right side dark */
    ),
    url("../assets/wings.png");

  background-repeat: no-repeat;
  background-position: 90% center;
  background-size: contain;
}
/* Stronger dark red gradient */

.wings-section {
  background:
    linear-gradient(
      90deg,
      rgba(120, 0, 0, 0.85) 0%,
      /* deep red */ rgba(120, 0, 0, 0.7) 35%,
      /* red spread */ rgba(120, 0, 0, 0.5) 55%,
      /* fade toward image */ rgba(0, 0, 0, 0.55) 75%,
      /* dark blend */ rgba(0, 0, 0, 0.8) 100% /* right side darker */
    ),
    url("../assets/wings.png");

  background-repeat: no-repeat;
  background-position: 90% center;
  background-size: contain;
}
/* Center flavor buttons */

.flavors {
  display: flex;
  flex-wrap: wrap;

  justify-content: center; /* horizontal center */
  align-items: center;

  gap: 12px;

  max-width: 600px;
  margin: 30px auto; /* center container */

  text-align: center;
}
.flavors span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
/* Center wings flavor buttons */

.wings-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.flavors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;

  max-width: 600px;
  margin-top: 25px;
}
/* Force center flavor buttons */

.flavor-list {
  display: flex !important;
  flex-wrap: wrap !important;

  justify-content: center !important;

  margin-left: auto !important;
  margin-right: auto !important;

  max-width: 500px;
}
.wings-right {
  flex-direction: column !important;
  align-items: center !important;
}
/* Force wings flavor pills center */

.wings-right {
  width: 100%;
  display: flex !important;
  justify-content: center !important;
}

.flavor-list {
  display: flex !important;
  flex-wrap: wrap !important;

  justify-content: center !important;
  align-items: center;

  margin: 0 auto !important;
  text-align: center;

  max-width: 520px;
}
/* Fix wings buttons vertical position */

.wings-section {
  display: flex;
  align-items: center;
}

.wings-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.flavor-list {
  justify-content: center;
}
/* Fix wings flavor size + spacing */

.flavor-list {
  max-width: 700px !important;
  gap: 16px !important;
}

.flavor {
  padding: 12px 22px !important;
  font-size: 15px !important;
  border-radius: 40px;
}
/* ===== WINGS FLAVOR FINAL FIX ===== */

.flavor-list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;

  gap: 14px !important;

  max-width: 800px !important;
  margin: 40px auto 0 auto !important;
}

/* flavor buttons */

.flavor {
  padding: 12px 22px !important;
  font-size: 15px !important;

  border-radius: 30px;

  background: rgba(40, 40, 40, 0.8) !important;

  backdrop-filter: blur(8px);

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

/* active red button */

.flavor.active {
  background: #ff4b3e !important;
  color: white;
}

/* green more button */

.flavor.more {
  background: #22c55e !important;
}

/* push buttons slightly over image */

.wings-right {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
/* Darker red + black gradient on left side */

.wings-section {
  background:
    linear-gradient(
      90deg,
      rgba(120, 0, 0, 0.9) 0%,
      /* dark red start */ rgba(120, 0, 0, 0.75) 30%,
      /* red spread */ rgba(0, 0, 0, 0.45) 55%,
      /* mix red-black */ rgba(0, 0, 0, 0.15) 70%,
      /* fade before image */ rgba(0, 0, 0, 0) 85% /* transparent near image */
    ),
    url("../assets/wings.png");

  background-repeat: no-repeat;
  background-position: 90% center;
  background-size: contain;
}
/* Strong red gradient on left */

.wings-section {
  background:
    linear-gradient(
      90deg,
      rgba(170, 0, 0, 0.95) 0%,
      /* strong red */ rgba(170, 0, 0, 0.75) 30%,
      /* red spread */ rgba(120, 0, 0, 0.55) 45%,
      /* deep red */ rgba(0, 0, 0, 0.35) 65%,
      /* blend to black */ rgba(0, 0, 0, 0) 85% /* transparent near image */
    ),
    url("../assets/wings.png");

  background-repeat: no-repeat;
  background-position: 90% center;
  background-size: contain;
}
/* Extra strong red gradient */

.wings-section {
  background:
    linear-gradient(
      90deg,
      rgba(200, 0, 0, 0.98) 0%,
      /* very strong red */ rgba(200, 0, 0, 0.9) 25%,
      /* strong spread */ rgba(180, 0, 0, 0.75) 45%,
      /* deep red */ rgba(80, 0, 0, 0.55) 60%,
      /* darker blend */ rgba(0, 0, 0, 0.35) 75%,
      /* black mix */ rgba(0, 0, 0, 0) 90% /* transparent near image */
    ),
    url("../assets/wings.png");

  background-repeat: no-repeat;
  background-position: 90% center;
  background-size: contain;
}
/* Ultra strong red gradient */

.wings-section {
  background:
    linear-gradient(
      90deg,
      rgba(220, 0, 0, 1) 0%,
      /* pure strong red */ rgba(220, 0, 0, 0.95) 30%,
      /* heavy red spread */ rgba(200, 0, 0, 0.85) 45%,
      /* deep red */ rgba(120, 0, 0, 0.6) 60%,
      /* dark red */ rgba(0, 0, 0, 0.35) 75%,
      /* blend */ rgba(0, 0, 0, 0) 90% /* transparent near image */
    ),
    url("../assets/wings.png");

  background-repeat: no-repeat;
  background-position: 90% center;
  background-size: contain;
}
/* Maximum red gradient */

.wings-section {
  background:
    linear-gradient(
      90deg,
      rgba(255, 0, 0, 1) 0%,
      /* pure red */ rgba(255, 0, 0, 0.95) 35%,
      /* strong red spread */ rgba(220, 0, 0, 0.9) 50%,
      /* deep red */ rgba(160, 0, 0, 0.7) 65%,
      /* darker red */ rgba(60, 0, 0, 0.5) 80%,
      /* red-black blend */ rgba(0, 0, 0, 0.2) 90%,
      /* fade */ rgba(0, 0, 0, 0) 100% /* transparent near image */
    ),
    url("../assets/wings.jpg");

  background-repeat: no-repeat;
  background-position: 90% center;
  background-size: contain;
}
/* Red → Black center blend */

.wings-section {
  background:
    linear-gradient(
      90deg,
      rgba(220, 0, 0, 1) 0%,
      /* strong red start */ rgba(180, 0, 0, 0.9) 30%,
      /* red */ rgba(0, 0, 0, 0.7) 55%,
      /* black center */ rgba(0, 0, 0, 0.5) 70%,
      /* darker near image */ rgba(0, 0, 0, 0) 90% /* transparent for image */
    ),
    url("../assets/wings.jpg");

  background-repeat: no-repeat;
  background-position: 90% center;
  background-size: contain;
}
/* Strong red → black gradient spread */

.wings-section {
  background:
    linear-gradient(
      90deg,
      rgba(200, 0, 0, 1) 0%,
      /* strong red */ rgba(180, 0, 0, 0.9) 25%,
      /* red */ rgba(120, 0, 0, 0.85) 40%,
      /* darker red */ rgba(0, 0, 0, 0.85) 65%,
      /* dark black center */ rgba(0, 0, 0, 0.5) 80%,
      /* darker right */ rgba(0, 0, 0, 0.6) 90% /* fade near image */
    ),
    url("../assets/wings.jpg");

  background-repeat: no-repeat;
  background-position: 92% center;
  background-size: contain;
}
/* Darken RIGHT side */

.wings-section {
  background:
    linear-gradient(
      270deg,
      rgba(0, 0, 0, 0.95) 0%,
      /* strong black right */ rgba(0, 0, 0, 0.85) 25%,
      /* dark */ rgba(120, 0, 0, 0.75) 45%,
      /* dark red center */ rgba(200, 0, 0, 0.7) 70%,
      /* red */ rgba(200, 0, 0, 0.6) 100% /* red left */
    ),
    url("../assets/wings.jpg");

  background-repeat: no-repeat;
  background-position: 90% center;
  background-size: contain;
}
/* Dark red → black LEFT side gradient */

.wings-section {
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.95) 0%,
      /* strong black left */ rgba(120, 0, 0, 0.9) 30%,
      /* dark red */ rgba(180, 0, 0, 0.7) 50%,
      /* red */ rgba(0, 0, 0, 0.2) 70%,
      /* fade */ rgba(0, 0, 0, 0) 90% /* transparent near image */
    ),
    url("../assets/wings.jpg");

  background-repeat: no-repeat;
  background-position: 90% center;
  background-size: contain;
}
/* Darker center red */

.wings-section {
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.95) 0%,
      /* black left */ rgba(120, 0, 0, 0.95) 25%,
      /* dark red */ rgba(150, 0, 0, 0.9) 45%,
      /* darker red center */ rgba(120, 0, 0, 0.7) 60%,
      /* fade red */ rgba(0, 0, 0, 0.2) 75%,
      /* fade to image */ rgba(0, 0, 0, 0) 90% /* transparent */
    ),
    url("../assets/wings.jpg");

  background-repeat: no-repeat;
  background-position: 90% center;
  background-size: contain;
}
/* FIX FLAVOR BUTTON ALIGNMENT */

.flavor-list {
  display: flex;
  flex-wrap: wrap;

  justify-content: center; /* center horizontally */
  align-items: center;

  gap: 14px;
  margin: 0 auto;

  max-width: 700px; /* width control */
  text-align: center;
}
/* ====================== */
/* HOUSE FAVORITES */
/* ====================== */

.house-favs {
  padding: 60px 6%;
  background: #f4f4f4;
}

.house-favs h2 {
  font-size: 26px;
  margin-bottom: 8px;
}

.fav-desc {
  color: #777;
  margin-bottom: 30px;
}

/* horizontal slider */

.fav-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
}

/* card */

.fav-item {
  min-width: 260px;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #ddd;
  scroll-snap-align: start;
}

/* image */

.fav-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* info */

.fav-info {
  padding: 15px;
}

.fav-info h3 {
  font-size: 18px;
  margin-bottom: 6px;
}

.fav-info p {
  color: #777;
  font-size: 14px;
  margin-bottom: 10px;
}

.fav-info span {
  font-weight: 600;
  font-size: 16px;
}
/* ===== HOUSE FAVORITES FIX ===== */

.fav-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.fav-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.fav-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.fav-info h3 {
  margin: 8px 0 5px;
  font-size: 18px;
  font-weight: 600;
}

.fav-info p {
  font-size: 14px;
  color: #777;
  line-height: 1.4;
  margin-bottom: 10px;
}

.fav-info span {
  font-size: 16px;
  font-weight: 700;
  color: #111;
}

/* slider smooth */

.fav-slider {
  align-items: stretch;
}
/* ============================= */
/* HOUSE FAVORITES PROFESSIONAL */
/* ============================= */

.house-favs {
  background: #0c0c0c;
  padding: 70px 6%;
  color: white;
}

/* title section */

.house-favs h2 {
  text-align: center;
  font-size: 32px;
  letter-spacing: 2px;
  margin-bottom: 50px;
  position: relative;
}

.house-favs h2:before,
.house-favs h2:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 120px;
  height: 2px;
  background: #d4a017;
}

.house-favs h2:before {
  left: 28%;
}

.house-favs h2:after {
  right: 28%;
}

/* view all button */

.view-all {
  position: absolute;
  right: 6%;
  top: 60px;
  border: 1px solid #555;
  padding: 10px 18px;
  border-radius: 30px;
  color: white;
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s;
}

.view-all:hover {
  background: #c40000;
  border-color: #c40000;
}

/* slider */

.fav-slider {
  display: flex;
  gap: 25px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
}

/* card */

.fav-item {
  min-width: 260px;
  background: #161616;
  border-radius: 14px;
  overflow: hidden;
  scroll-snap-align: start;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  transition: 0.3s;
}

.fav-item:hover {
  transform: translateY(-6px);
}

/* image */

.fav-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* info */

.fav-info {
  padding: 18px;
  text-align: center;
}

/* pizza name */

.fav-info h3 {
  font-size: 18px;
  margin-bottom: 8px;
  font-weight: 600;
}

/* price */

.fav-info span {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #ffd166;
  margin-bottom: 12px;
}

/* order button */

.order-btn {
  display: inline-block;
  background: #d40000;
  color: white;
  padding: 10px 24px;
  border-radius: 30px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: 0.3s;
}

.order-btn:hover {
  background: #ff1e1e;
}
/* ===== HOUSE FAVORITES ALIGNMENT FIX ===== */

.house-favs {
  padding: 70px 6%;
  background: transparent;
}

/* title center */

.house-favs h2 {
  text-align: center;
  font-size: 34px;
  letter-spacing: 2px;
  margin-bottom: 15px;
}

/* description */

.fav-desc {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 40px auto;
  color: #ddd;
}

/* cards alignment */

.fav-slider {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 25px;
  flex-wrap: wrap;
}

/* card */

.fav-item {
  width: 260px;
  background: #1c1c1c;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* image */

.fav-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* text */

.fav-info {
  padding: 18px;
  text-align: center;
  color: white;
  flex: 1;
}

.fav-info h3 {
  font-size: 18px;
  margin-bottom: 6px;
}

.fav-info p {
  font-size: 14px;
  color: #bbb;
  margin-bottom: 10px;
}

.fav-info span {
  font-size: 18px;
  font-weight: 700;
  color: #ffd166;
}
/* ===== HOUSE FAVORITES ALIGNMENT FIX ===== */

.fav-slider {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 30px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

.fav-item {
  width: 260px;
  margin: 0 auto;
}
/* ===== HOUSE FAVORITES CARD HEIGHT FIX ===== */

.fav-item {
  height: 360px;
  display: flex;
  flex-direction: column;
}

.fav-item img {
  height: 180px;
  object-fit: cover;
}

.fav-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}
/* ===== HOUSE FAVORITES HEADING FIX ===== */

.house-favs h2 {
  text-align: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: 34px;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.house-favs h2::before,
.house-favs h2::after {
  content: "";
  flex: 1;
  height: 2px;
  background: #d4a017;
  max-width: 120px;
}
/* ===== HOUSE FAVORITES HEADING FIX ===== */

.house-favs h2 {
  position: relative;
  text-align: center;
  font-size: 34px;
  letter-spacing: 2px;
  margin-bottom: 25px;
  z-index: 2;
}

.house-favs h2::before,
.house-favs h2::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 120px;
  height: 2px;
  background: #d4a017;
  transform: translateY(-50%);
  z-index: 1;
}

.house-favs h2::before {
  left: -140px;
}

.house-favs h2::after {
  right: -140px;
}
/* ===== HOUSE FAVORITES HEADING - REFERENCE STYLE ===== */

.house-favs h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 34px;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 10px;
}

/* left line */
.house-favs h2::before {
  content: "";
  height: 2px;
  width: 120px;
  background: #d4a017;
}

/* right line */
.house-favs h2::after {
  content: "";
  height: 2px;
  width: 120px;
  background: #d4a017;
}
/* ===== HOUSE FAVORITES HEADING FIX FINAL ===== */

.house-favs {
  text-align: center;
  position: relative;
}

.house-favs h2 {
  position: relative;
  display: inline-block;
  font-size: 34px;
  letter-spacing: 2px;
  padding: 0 25px;
  background: transparent;
  z-index: 2;
}

/* lines */

.house-favs h2::before,
.house-favs h2::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 150px;
  height: 2px;
  background: #d4a017;
}

.house-favs h2::before {
  right: 100%;
  margin-right: 20px;
}

.house-favs h2::after {
  left: 100%;
  margin-left: 20px;
}
/* FIX ORDER NOW BUTTON CROP */

.fav-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto;
}

.fav-info {
  padding-bottom: 20px;
}

.order-btn {
  display: block;
  margin-top: 15px;
}
/* HOUSE FAVORITES DARK OVERLAY */

.house-favs {
  position: relative;
}

.house-favs::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.55); /* darkness control */

  z-index: 0;
}

.house-favs > * {
  position: relative;
  z-index: 1;
}
/* DELIVERY STRIP – INSPO STYLE */

.delivery-strip {
  width: 100%;
  padding: 35px 8%;
  margin-top: 40px;

  /* green → black gradient */
  background: linear-gradient(to right, #0f5a3c 0%, #0b3d2a 30%, #0a0a0a 100%);

  /* subtle glow like reference */
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.6);
}

/* heading */

.delivery-strip h3 {
  color: white;
  font-size: 22px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

/* cities */

.delivery-cities {
  color: #e6e6e6;
  font-size: 15px;
  margin-bottom: 6px;
}

/* delivery info */

.delivery-info {
  color: #cfcfcf;
  font-size: 14px;
}
/* ====================== */
/* DELIVERY STRIP */
/* ====================== */

.delivery-strip {
  width: 100%;
  padding: 40px 8%;
  margin-top: 40px;
  position: relative;

  /* soft green glow like wings section */
  background:
    radial-gradient(
      circle at left,
      rgba(34, 197, 94, 0.35) 0%,
      rgba(34, 197, 94, 0.18) 25%,
      rgba(0, 0, 0, 0.85) 70%
    ),
    linear-gradient(to right, #0b0b0b, #000000);

  /* remove box look */
  border: none;
  border-radius: 0;
}

/* heading */

.delivery-strip h3 {
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

/* cities text */

.delivery-strip .delivery-cities {
  color: #e6e6e6;
  font-size: 15px;
  margin-bottom: 6px;
}

/* delivery info */

.delivery-strip .delivery-info {
  color: #cfcfcf;
  font-size: 14px;
}
/* ===== MOBILE FIX ===== */

@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  /* NAVBAR */

  nav {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 15px;
  }

  nav ul {
    flex-direction: column;
    gap: 18px;
    text-align: center;
  }

  /* HERO */

  .hero {
    flex-direction: column;
    text-align: center;
    padding: 60px 20px;
  }

  .hero h1 {
    font-size: 32px;
    line-height: 1.2;
  }

  .hero p {
    font-size: 14px;
  }

  .hero img {
    width: 90%;
    margin: auto;
  }

  /* BUTTONS */

  .hero-buttons {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  /* MENU CARDS */

  .menu-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* HOUSE FAVORITES */

  .fav-slider {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* WINGS SECTION */

  .wings {
    flex-direction: column;
    text-align: center;
  }

  .wing-flavors {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* DELIVERY STRIP */

  .delivery-container {
    flex-direction: column;
    text-align: center;
  }

  .delivery-map {
    display: none;
  }

  /* CTA */

  .cta-inner {
    text-align: center;
    padding: 60px 20px;
  }

  /* FOOTER */

  .footer-container {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .footer-social {
    justify-content: center;
  }
}
/* paragraph spacing */

.delivery-strip p {
  margin: 4px 0;
}
/* ====================== */
/* DELIVERY STRIP (INSPO STYLE) */
/* ====================== */

.delivery-strip {
  width: 100%;
  padding: 36px 8%;
  margin-top: 40px;
  position: relative;
  overflow: hidden;

  /* base dark layer */
  background: #0a0a0a;

  /* green glow → black fade */
  background-image:
    radial-gradient(
      circle at left center,
      rgba(46, 204, 113, 0.45) 0%,
      rgba(46, 204, 113, 0.25) 20%,
      rgba(46, 204, 113, 0.1) 35%,
      rgba(0, 0, 0, 0.85) 70%
    ),
    linear-gradient(to right, #0a0a0a, #000);

  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* heading */
.delivery-strip h3 {
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

/* cities line */
.delivery-strip .delivery-cities {
  color: #e8e8e8;
  font-size: 15px;
  margin-bottom: 6px;
}

/* delivery info */
.delivery-strip .delivery-info {
  color: #cfcfcf;
  font-size: 14px;
}

/* spacing */
.delivery-strip p {
  margin: 4px 0;
}
.house-favs {
  margin-bottom: 0;
  padding-bottom: 0;
}

.delivery-strip {
  margin-top: 0;
}
/* HOUSE FAVORITES - 4 CARDS IN ONE LINE */

.fav-slider {
  display: flex;
  gap: 25px;
  overflow: hidden; /* scroll hata diya */
  justify-content: center;
}

.fav-item {
  flex: 0 0 260px; /* fixed width so 4 fit properly */
  max-width: 260px;
}
.fav-slider {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.fav-item {
  width: 100%;
}
.delivery-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.delivery-text {
  max-width: 600px;
}

.delivery-map img {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 12px;
  opacity: 0.9;
}
/* CTA BUTTON GREEN */

.btn.btn-gold {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 30px;

  background: linear-gradient(to right, #34d399, #16a34a);

  color: white;
  font-weight: 600;
  text-decoration: none;

  transition: 0.3s;
}

.btn.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}
.cta {
  padding: 70px 8%;
  position: relative;

  background: radial-gradient(
    circle at right,
    rgba(220, 38, 38, 0.35),
    transparent 60%
  );
}
/* CTA SECTION RED GLOW */

.cta {
  padding: 80px 8%;
  position: relative;

  /* red glow overlay */
  background: radial-gradient(
    circle at right center,
    rgba(220, 38, 38, 0.35) 0%,
    rgba(220, 38, 38, 0.18) 25%,
    rgba(0, 0, 0, 0) 60%
  );
}
/* CTA RED GLOW LEFT SIDE */

.cta {
  padding: 80px 8%;
  position: relative;

  background: radial-gradient(
    circle at left center,
    rgba(255, 60, 60, 0.55) 0%,
    rgba(255, 60, 60, 0.35) 25%,
    rgba(255, 60, 60, 0.15) 45%,
    rgba(0, 0, 0, 0) 70%
  );
}
.cta {
  padding: 80px 8%;
  position: relative;

  background: radial-gradient(
    ellipse at left center,
    rgba(255, 60, 60, 0.6) 0%,
    rgba(255, 60, 60, 0.35) 30%,
    rgba(255, 60, 60, 0.15) 50%,
    rgba(0, 0, 0, 0) 75%
  );
}
.cta {
  padding: 80px 8%;
  position: relative;

  background: radial-gradient(
    ellipse 1200px 500px at left center,
    rgba(80, 0, 0, 0.75) 0%,
    rgba(80, 0, 0, 0.45) 35%,
    rgba(0, 0, 0, 0) 75%
  );
}
/* DARK RED HORIZONTAL GLOW FOR CTA */

.cta {
  padding: 80px 8%;
  position: relative;

  background: radial-gradient(
    ellipse 1600px 600px at left center,
    rgba(60, 0, 0, 0.9) 0%,
    rgba(80, 0, 0, 0.7) 25%,
    rgba(80, 0, 0, 0.45) 45%,
    rgba(80, 0, 0, 0.2) 60%,
    rgba(0, 0, 0, 0) 80%
  );
}
.cta {
  background: radial-gradient(
    ellipse 2000px 700px at left center,
    rgba(40, 0, 0, 0.95) 0%,
    rgba(60, 0, 0, 0.7) 35%,
    rgba(0, 0, 0, 0) 80%
  );
}
/* FOOTER */

.footer {
  background: #0f0f0f;
  padding: 60px 8%;
  color: white;
}

.footer-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

/* LOGO */

.footer-logo img {
  height: 60px;
}

/* REVIEW */

.footer-review {
  text-align: center;
  max-width: 500px;
}

.footer-review h3 {
  font-size: 26px;
  margin-bottom: 10px;
}

.footer-review p {
  color: #ccc;
  line-height: 1.6;
  margin-top: 10px;
}

.review-author {
  display: block;
  margin-top: 10px;
  color: #aaa;
  font-size: 14px;
}

/* DOTS */

.dots {
  margin: 8px 0;
}

.dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #d4a24c;
  border-radius: 50%;
  margin: 4px;
}

/* SOCIAL */

.footer-social {
  display: flex;
  gap: 20px;
  font-size: 22px;
}

.footer-social a {
  color: white;
  transition: 0.3s;
}

.footer-social a:hover {
  color: #d4a24c;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #777;
  border-radius: 6px;
  color: white;
  font-size: 18px;
  margin: 5px;
  transition: 0.3s;
}

.footer-social a:hover {
  background: #d4a24c;
  border-color: #d4a24c;
  color: black;
}
/* ORDER NOW BUTTON GREEN */
.order-btn,
.order-now,
.btn-order {
  background: #34c38f !important;
  color: white !important;
  border: none !important;
}

.order-btn:hover,
.order-now:hover,
.btn-order:hover {
  background: #2fa77a !important;
}
/* hamburger hidden on desktop */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: white;
  display: block;
}

/* MOBILE ONLY */
@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }

  .nav-links {
    position: fixed;
    top: 70px;
    right: -100%;
    width: 70%;
    height: 100vh;
    background: #111;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    padding-top: 40px;
    transition: 0.3s;
    display: flex;
  }

  .nav-links.active {
    right: 0;
  }
}
/* =========================
MOBILE FIXES
ADD AT END OF CSS
========================= */

/* stop sideways scrolling */

html,
body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

/* announcement bar */

.announcement-bar {
  position: relative;
  z-index: 1000;
  width: 100%;
}

/* navbar */

.nav {
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
}

/* hero spacing so navbar doesn't overlap */

.hero {
  padding-top: 120px;
}

/* hamburger button */

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.hamburger span {
  width: 26px;
  height: 3px;
  background: #fff;
  display: block;
}

/* =========================
MOBILE NAVBAR
========================= */

@media (max-width: 768px) {
  /* show hamburger */

  .hamburger {
    display: flex;
  }

  /* mobile nav menu */

  #nav-links {
    position: fixed;
    top: 70px;
    right: -100%;
    width: 70%;
    height: 100vh;
    background: #111;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding-top: 40px;
    transition: 0.3s;
    z-index: 999;
  }

  /* open menu */

  #nav-links.active {
    right: 0;
  }

  /* nav links */

  #nav-links a {
    font-size: 18px;
  }

  /* hero responsive */

  .hero {
    text-align: center;
    padding-top: 140px;
  }

  /* buttons stack */

  .hero-buttons {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  /* menu grid fix */

  .menu-grid {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }

  /* house favorites */

  .fav-slider {
    grid-template-columns: 1fr;
  }

  /* delivery section */

  .delivery-container {
    flex-direction: column;
    text-align: center;
  }

  /* footer */

  .footer-container {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }
}
/* ===== MOBILE LAYOUT FIX ===== */
@media (max-width: 768px) {
  /* stop horizontal scrolling */
  html,
  body {
    overflow-x: hidden;
  }

  /* make main sections full width */
  .nav,
  .announcement-bar,
  .hero,
  .menu-section,
  .house-favs,
  .delivery-strip,
  .cta,
  footer {
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  /* navbar layout */
  .nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* hide menu links by default on mobile */
  #nav-links {
    position: fixed;
    top: 70px;
    right: -100%;
    width: 75%;
    height: 100vh;
    background: #111;
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding-top: 40px;
    align-items: center;
    transition: 0.3s;
  }

  /* show when hamburger clicked */
  #nav-links.active {
    right: 0;
  }

  /* hamburger button */
  .hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
  }

  .hamburger span {
    width: 25px;
    height: 3px;
    background: white;
  }

  /* hero section center */
  .hero {
    text-align: center;
    padding-top: 140px;
  }

  /* hero buttons stack */
  .hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
}
/* ===== MOBILE FIX ===== */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* navbar layout */
.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* hamburger hidden desktop */
.hamburger {
  display: none;
}

/* mobile layout */
@media (max-width: 768px) {
  /* show hamburger */
  .hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
  }

  .hamburger span {
    width: 25px;
    height: 3px;
    background: #fff;
  }

  /* hide menu by default */
  #nav-links {
    display: none;
    flex-direction: column;
    background: #111;
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    padding: 20px;
    z-index: 999;
  }

  /* open menu */
  #nav-links.active {
    display: flex;
  }

  /* hero mobile */
  .hero {
    text-align: center;
    padding-top: 120px;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 12px;
  }

  /* fix wide sections */
  section {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  /* prevent sideways scroll */
  img {
    max-width: 100%;
    height: auto;
  }
}
/* ================= MOBILE HOMEPAGE FIX ================= */

@media (max-width: 768px) {
  /* GENERAL */

  body {
    overflow-x: hidden;
  }

  .section {
    padding: 40px 20px;
  }

  /* NAVBAR */

  .nav-inner {
    padding: 0 15px;
  }

  .logo img {
    height: 50px;
  }

  /* HERO SECTION */

  .hero {
    padding: 120px 20px;
    text-align: center;
    background-position: center 85%;
  }

  .hero-content {
    max-width: 100%;
    margin: auto;
  }

  .hero h1 {
    font-size: 34px;
  }

  .hero p {
    font-size: 16px;
    line-height: 1.6;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .hero-info {
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
  }

  /* MENU CATEGORY SCROLL */

  .category-list {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding: 10px 5px;
    scrollbar-width: none;
  }

  .category-list::-webkit-scrollbar {
    display: none;
  }

  .category {
    min-width: 120px;
    text-align: center;
  }

  /* HOUSE FAVORITES SCROLL */

  .favorites-grid {
    display: flex;
    overflow-x: auto;
    gap: 18px;
    padding: 10px;
    scrollbar-width: none;
  }

  .favorites-grid::-webkit-scrollbar {
    display: none;
  }

  .food-card {
    min-width: 250px;
  }

  /* CTA */

  .cta {
    padding: 60px 20px;
    text-align: center;
  }

  /* DELIVERY */

  .delivery-strip {
    text-align: center;
    font-size: 14px;
    padding: 20px;
  }
}
/* ===== MOBILE HERO DESKTOP STYLE FIX ===== */

@media (max-width: 768px) {
  .hero {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 100px 20px;
    text-align: left;
    background-position: right center;
  }

  /* LEFT DARK OVERLAY */
  .hero::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 70%;
    height: 100%;
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.85),
      rgba(0, 0, 0, 0.65),
      transparent
    );
    z-index: 1;
  }

  /* TEXT CONTENT */
  .hero-content {
    position: relative;
    z-index: 2;
    max-width: 60%;
  }

  .hero h1 {
    font-size: 32px;
    line-height: 1.2;
  }

  .hero p {
    font-size: 15px;
    margin-bottom: 20px;
  }

  /* BUTTONS */
  .hero-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .hero-buttons .btn {
    padding: 10px 18px;
    font-size: 14px;
  }

  /* INFO ROW */
  .hero-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    margin-top: 15px;
  }
}
/* ===== MOBILE HERO ALIGN FIX ===== */

@media (max-width: 768px) {
  .hero {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 110px 15px 80px 15px;
    text-align: left;
    background-position: right center;
  }

  /* LEFT DARK OVERLAY */

  .hero::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 65%;
    height: 100%;
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.9),
      rgba(0, 0, 0, 0.6),
      transparent
    );
    z-index: 1;
  }

  /* TEXT CONTENT */

  .hero-content {
    position: relative;
    z-index: 2;
    max-width: 55%;
    margin-left: 0;
    padding-left: 5px;
  }

  /* TITLE */

  .hero h1 {
    font-size: 32px;
    margin-left: 0;
  }

  /* PARAGRAPH */

  .hero p {
    font-size: 15px;
    margin-left: 0;
  }

  /* BUTTONS */

  .hero-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* INFO */

  .hero-info {
    margin-top: 15px;
    font-size: 13px;
  }
}
/* ===== HERO ALIGNMENT FIX ===== */

@media (max-width: 768px) {
  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: 55%;
  }

  /* BUTTONS LEFT ALIGN */

  .hero-buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 15px;
  }

  /* CONTACT INFO LEFT ALIGN */

  .hero-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 15px;
    font-size: 14px;
  }

  /* REMOVE AUTO CENTERING */

  .hero-buttons .btn,
  .hero-info span {
    margin-left: 0;
  }
}
/* ===== REMOVE MOBILE SIDE MARGINS ===== */

@media (max-width: 768px) {
  html,
  body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  /* all sections full width */

  section {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* containers full width */

  .container,
  .hero-content,
  .category-list,
  .favorites-grid {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  /* remove card outer spacing */

  .categories,
  #wings,
  .favorites,
  .cta,
  .delivery-strip {
    margin-left: 0;
    margin-right: 0;
  }
}
/* ===== REMOVE SIDE SPACE FROM EXPLORE MENU TO FOOTER ===== */

@media (max-width: 768px) {
  .categories,
  #wings,
  .favorites,
  .cta,
  .delivery-strip,
  footer {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
  }

  /* cards full width */

  .food-card {
    width: 92%;
    margin-left: auto;
    margin-right: auto;
  }

  /* menu category cards */

  .category-list {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* wing flavor box */

  .flavor-grid {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }

  /* house favorites */

  .favorites-grid {
    padding-left: 10px;
    padding-right: 10px;
  }
}
/* Fix Explore Our Menu heading */

.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  white-space: nowrap;
  text-align: center;
}

.section-title::before,
.section-title::after {
  content: "—";
  font-size: 28px;
  color: #38c172; /* green color */
}
/* Explore Our Menu single line */

.section-title {
  display: block;
  text-align: center;
  white-space: nowrap;
  font-size: 28px;
}

.section-title::before,
.section-title::after {
  display: none;
}

.section-title {
  content: none;
}
/* Force Explore Our Menu in single line */

.section-title {
  white-space: nowrap;
  width: 100%;
  max-width: 100%;
  text-align: center;
  font-size: 26px;
  letter-spacing: 2px;
}

.section-title br {
  display: none;
}
/* Explore heading style */

.section-title {
  text-align: center;
  font-size: 30px;
  line-height: 1.3;
}

.section-title::before {
  content: "— EXPLORE —";
  display: block;
  font-size: 22px;
  margin-bottom: 6px;
  color: #fff;
}

.section-title {
  text-transform: uppercase;
}
/* Move View All button above heading on mobile */

@media (max-width: 768px) {
  .view-all-btn {
    position: absolute;
    right: 20px;
    top: -20px;
  }

  .house-favorites {
    position: relative;
  }
}
/* Move View All button above heading on mobile */

@media (max-width: 768px) {
  .view-all-btn {
    position: absolute;
    right: 20px;
    top: -20px;
  }

  .house-favorites {
    position: relative;
  }
}
/* Explore Menu title alignment fix */

.explore-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  text-align: center;
  font-size: 30px;
}

.explore-title::before,
.explore-title::after {
  content: "";
  height: 3px;
  width: 60px;
  background: #38c172;
  display: inline-block;
}
/* House favorites button top-right fix */

.house-header {
  position: relative;
  text-align: center;
}

.house-header h2 {
  text-align: center;
  margin: 0 auto;
}

.view-all {
  position: absolute;
  top: -60px;
  right: 10px;
  transform: none;
}
/* CONTACT HERO */

.contact-hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("../assets/pizza-bg.jpg");
  background-size: cover;
  background-position: center;
  text-align: center;
  padding: 80px 20px;
  color: white;
}

.contact-hero h1 {
  font-size: 36px;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.contact-hero p {
  max-width: 600px;
  margin: auto;
  opacity: 0.9;
}

.contact-cta {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}
/* CONTACT GRID */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  padding: 60px 8%;
}

.contact-card {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  transition: 0.3s;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.contact-card:hover {
  transform: translateY(-6px);
}

.contact-card h3 {
  margin-bottom: 10px;
  color: #f7c873;
}

.contact-card a {
  color: #7cffb2;
  text-decoration: none;
}
/* DELIVERY INFO */

.delivery-info {
  padding: 60px 8%;
  text-align: center;
}

.delivery-info h2 {
  margin-bottom: 30px;
  font-size: 30px;
}

.delivery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

.delivery-card {
  background: #111;
  padding: 20px;
  border-radius: 10px;
  color: white;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.delivery-card span {
  display: block;
  margin-top: 6px;
  color: #7cffb2;
  font-weight: 600;
}

.delivery-note {
  margin-top: 20px;
  opacity: 0.7;
}
/* MAP ORDER SECTION */

.map-order {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  padding: 60px 8%;
  align-items: center;
}

.map iframe {
  width: 100%;
  height: 350px;
  border-radius: 10px;
}

.order-box {
  background: linear-gradient(135deg, #8b0000, #1a1a1a);
  color: white;
  padding: 40px;
  border-radius: 12px;
  text-align: center;
}

.order-box h2 {
  font-size: 30px;
  margin-bottom: 10px;
}

.order-box p {
  opacity: 0.85;
  margin-bottom: 20px;
}
/* FOOTER */

.footer {
  background: #000;
  color: white;
  padding: 80px 20px 50px;
  text-align: center;
}

.footer-container {
  max-width: 900px;
  margin: auto;
}

.footer-logo img {
  width: 140px;
  margin-bottom: 20px;
}

/* Title */

.footer-review h3 {
  font-size: 34px;
  margin-bottom: 20px;
}

/* rating dots */

.dots {
  margin: 15px 0;
}

.dots span {
  height: 8px;
  width: 8px;
  background: #d4a24c;
  display: inline-block;
  margin: 0 6px;
  border-radius: 50%;
}

/* review text */

.footer-review p {
  font-size: 18px;
  line-height: 1.6;
  opacity: 0.9;
  margin: 20px 0;
}

.review-author {
  display: block;
  opacity: 0.7;
  margin-top: 10px;
}

/* social icons */

.footer-social {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 35px;
}

.footer-social a {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: white;
  font-size: 20px;
  text-decoration: none;
  transition: 0.3s;
}

.footer-social a:hover {
  background: #34c759;
  border-color: #34c759;
}
@media (max-width: 768px) {
  .footer-review h3 {
    font-size: 28px;
  }

  .footer-review p {
    font-size: 16px;
  }

  .footer-social a {
    width: 45px;
    height: 45px;
  }
}
/* MOBILE */

@media (max-width: 768px) {
  .contact-hero h1 {
    font-size: 28px;
  }

  .map-order {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    padding: 40px 5%;
  }
}
/* CONTACT HERO */

.contact-hero {
  position: relative;
  background: url("../assets/contact-pizza-hero.jpg") right center / cover
    no-repeat;
  padding: 140px 20px;
  text-align: center;
  color: white;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
}

.hero-content {
  position: relative;
  max-width: 750px;
  margin: auto;
  z-index: 2;
}

.contact-hero h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 15px;
}

.contact-hero p {
  font-size: 18px;
  color: #ddd;
  margin-bottom: 35px;
  line-height: 1.6;
}

/* BUTTONS */

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.btn-call {
  background: #1f9d55;
  padding: 16px 36px;
  border-radius: 40px;
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: 0.3s;
}

.btn-call:hover {
  background: #157a40;
}

.btn-order {
  background: #f1ece6;
  padding: 16px 36px;
  border-radius: 40px;
  color: #333;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: 0.3s;
}

.btn-order:hover {
  background: #ddd;
}

/* META TEXT */

.hero-meta {
  color: #d4b46a;
  font-size: 15px;
  font-weight: 500;
}

.divider {
  margin: 0 12px;
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.75),
    rgba(0, 0, 0, 0.65),
    rgba(0, 0, 0, 0.4)
  );
}
.contact-card {
  padding: 30px;
  border-radius: 14px;
  text-align: center;
  color: white;
  transition: 0.3s;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* RED cards */
.contact-card:nth-child(odd) {
  background: linear-gradient(135deg, #8b1e1e, #c0392b);
}

/* GREEN cards */
.contact-card:nth-child(even) {
  background: linear-gradient(135deg, #1f7a4c, #2ecc71);
}

.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
}
.contact-card:nth-child(odd) {
  background: #b03a3a; /* darker red */
}

.contact-card:nth-child(even) {
  background: #2f8f5b; /* darker green */
}
/* GLASSY FLOATING CONTACT CARDS */

.contact-card {
  padding: 30px;
  border-radius: 16px;
  text-align: center;
  color: white;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.15);

  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.6),
    0 0 10px rgba(0, 0, 0, 0.3);

  transition: all 0.35s ease;
}

/* RED CARD */
.contact-card:nth-child(odd) {
  background: rgba(200, 60, 60, 0.75);
}

/* GREEN CARD */
.contact-card:nth-child(even) {
  background: rgba(50, 150, 90, 0.75);
}

/* FLOAT HOVER EFFECT */
.contact-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.8),
    0 0 15px rgba(0, 0, 0, 0.5);
}
/* LIGHT GLASS CONTACT CARDS */

.contact-card {
  padding: 30px;
  border-radius: 18px;
  text-align: center;
  color: white;

  /* glass effect */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(255, 255, 255, 0.25);

  /* floating shadow */
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);

  transition: all 0.35s ease;
}

/* LIGHT RED GLASS */
.contact-card:nth-child(odd) {
  background: rgba(220, 80, 80, 0.45);
}

/* LIGHT GREEN GLASS */
.contact-card:nth-child(even) {
  background: rgba(60, 180, 120, 0.45);
}

/* FLOAT EFFECT */
.contact-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}
/* LIGHT GLASSY CONTACT CARDS */

.contact-card {
  padding: 30px;
  border-radius: 18px;
  text-align: center;
  color: white;

  /* glass effect */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(255, 255, 255, 0.25);

  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
  transition: all 0.35s ease;
}

/* LIGHT RED GRADIENT */
.contact-card:nth-child(odd) {
  background: linear-gradient(
    135deg,
    rgba(255, 120, 120, 0.35),
    rgba(255, 90, 90, 0.25)
  );
}

/* LIGHT GREEN GRADIENT */
.contact-card:nth-child(even) {
  background: linear-gradient(
    135deg,
    rgba(120, 255, 190, 0.35),
    rgba(80, 200, 140, 0.25)
  );
}

/* FLOAT EFFECT */
.contact-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.8);
}
/* MOBILE CONTACT SECTION */

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 0 15px;
  }

  .contact-card {
    padding: 22px;
    font-size: 14px;
  }
}

/* SMALL MOBILE */

@media (max-width: 500px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .contact-card {
    padding: 20px;
    font-size: 14px;
  }
}
/* DELIVERY SECTION */

.delivery-section {
  text-align: center;
  padding: 80px 20px;
}

.delivery-section h2 {
  font-size: 36px;
  color: #ffffff;
  margin-bottom: 40px;
  font-weight: 600;
}

/* GRID */

.delivery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 900px;
  margin: auto;
}

/* CARDS */

.delivery-card {
  background: rgba(25, 25, 25, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-radius: 18px;
  padding: 28px;

  border: 1px solid rgba(255, 255, 255, 0.15);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.6),
    inset 0 0 10px rgba(255, 255, 255, 0.05);

  transition: all 0.35s ease;
}

/* HOVER FLOAT */

.delivery-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.8),
    0 0 15px rgba(0, 255, 120, 0.2);
}

/* ICON */

.delivery-card i {
  font-size: 22px;
  margin-right: 8px;
  color: #9ef5c1;
}

/* TITLE */

.delivery-card h4 {
  color: white;
  font-size: 18px;
  margin-bottom: 10px;
}

/* VALUE */

.delivery-card span {
  display: block;
  color: #5cff9c;
  font-size: 22px;
  font-weight: 600;
}

/* DISCLAIMER */

.delivery-note {
  margin-top: 30px;
  font-size: 14px;
  color: #dcdcdc;
  opacity: 0.8;
}

/* MOBILE */

@media (max-width: 768px) {
  .delivery-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
/* DELIVERY INFO FINAL FIX */

.delivery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 900px;
  margin: auto;
  margin-top: 40px;
}

/* CENTER LAST CARD */
.delivery-card:last-child {
  grid-column: 1 / span 2;
  justify-self: center;
  width: 50%;
}

/* CARD STYLE */
.delivery-card {
  background: rgba(20, 20, 20, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  padding: 28px;
  border-radius: 18px;

  border: 1px solid rgba(255, 255, 255, 0.18);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.7),
    inset 0 0 10px rgba(255, 255, 255, 0.05);

  text-align: center;

  transition: all 0.35s ease;
}

/* HOVER FLOAT */
.delivery-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.8),
    0 0 12px rgba(0, 255, 120, 0.3);
}

/* TITLE */
.delivery-card h4 {
  color: white;
  font-size: 18px;
  margin-bottom: 10px;
}

/* VALUE TEXT */
.delivery-card span {
  color: #5cff9c;
  font-size: 22px;
  font-weight: 600;
}

/* MOBILE */
@media (max-width: 768px) {
  .delivery-grid {
    grid-template-columns: 1fr;
  }

  .delivery-card:last-child {
    grid-column: auto;
    width: 100%;
  }
}
/* ===== PREMIUM DELIVERY SECTION ===== */

.delivery-section {
  text-align: center;
  padding: 90px 20px;
  position: relative;
}

/* HEADING */

.delivery-section h2 {
  color: white;
  font-size: 38px;
  font-weight: 600;
  margin-bottom: 60px;
  position: relative;
}

/* GREEN GLOW LINE */

.delivery-section h2::after {
  content: "";
  width: 140px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #63ffb3, transparent);
  display: block;
  margin: 18px auto 0;
  box-shadow: 0 0 15px #63ffb3;
}

/* GRID */

.delivery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 35px;
  max-width: 900px;
  margin: auto;
}

/* CENTER LAST CARD */

.delivery-card:last-child {
  grid-column: 1 / span 2;
  width: 55%;
  margin: auto;
}

/* GLASS CARDS */

.delivery-card {
  background: rgba(30, 30, 30, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-radius: 20px;
  padding: 32px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.7),
    0 0 15px rgba(0, 255, 150, 0.15);

  text-align: center;

  transition: all 0.35s ease;
}

/* HOVER */

.delivery-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.9),
    0 0 20px rgba(0, 255, 150, 0.35);
}

/* TITLE */

.delivery-card h4 {
  color: white;
  font-size: 18px;
  margin-bottom: 12px;
}

/* VALUE */

.delivery-card span {
  color: #63ffb3;
  font-size: 26px;
  font-weight: 600;
}

/* DISCLAIMER */

.delivery-note {
  margin-top: 35px;
  color: #e2e2e2;
  font-size: 14px;
  opacity: 0.8;
}

/* MOBILE */

@media (max-width: 768px) {
  .delivery-grid {
    grid-template-columns: 1fr;
  }

  .delivery-card:last-child {
    grid-column: auto;
    width: 100%;
  }
}
/* DARK GLASS CARDS */

.delivery-card {
  background: rgba(0, 0, 0, 0.55) !important; /* darker transparent black */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border: 1px solid rgba(255, 255, 255, 0.18);

  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.85),
    0 0 15px rgba(0, 255, 150, 0.12);
}

/* TEXT */

.delivery-card h4 {
  color: #ffffff;
}

.delivery-card span {
  color: #63ffb3; /* bright green numbers */
}
/* DARK OVERLAY FOR DELIVERY SECTION */

.delivery-section {
  position: relative;
}

/* black overlay */

.delivery-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.45); /* darkness control */

  z-index: 0;
}

/* keep content above overlay */

.delivery-section * {
  position: relative;
  z-index: 1;
}
/* =========================
MOBILE RESPONSIVE (CONTACT PAGE)
========================= */

@media (max-width: 768px) {
  /* HERO SECTION */

  .contact-hero {
    padding: 80px 20px;
    text-align: center;
  }

  .contact-hero h1 {
    font-size: 32px;
    line-height: 1.3;
  }

  .contact-hero p {
    font-size: 16px;
    padding: 0 10px;
  }

  .contact-cta {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    margin-top: 20px;
  }

  .contact-cta a {
    width: 80%;
    max-width: 280px;
    text-align: center;
  }

  /* ADDRESS / PHONE / HOURS CARDS */

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px;
  }

  .contact-card {
    width: 100%;
  }

  /* DELIVERY INFO SECTION */

  .delivery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px;
    max-width: 420px;
    margin: auto;
  }

  /* center the last card */

  .delivery-card:last-child {
    grid-column: auto;
    max-width: 260px;
    margin: auto;
  }

  /* DELIVERY CARDS SIZE */

  .delivery-card {
    padding: 20px;
    border-radius: 16px;
  }

  /* HEADING SIZE */

  .delivery-section h2 {
    font-size: 26px;
    text-align: center;
  }

  /* GREEN LINE UNDER HEADING */

  .delivery-section h2::after {
    width: 70px;
    height: 3px;
    margin: 10px auto 0;
  }
}
/* ABOUT HERO */

.about-hero {
  position: relative;
  height: 60vh;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;

  background: url("../assets/wood-bg.jpg") center/cover no-repeat;
}

.about-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.about-hero-content {
  position: relative;
  z-index: 2;

  color: white;
  max-width: 700px;
  padding: 20px;
}

.about-hero-content h1 {
  font-size: 46px;
  margin-bottom: 12px;
  font-weight: 700;
}

.about-hero-content p {
  font-size: 18px;
  opacity: 0.9;
}
.story-section {
  padding: 80px 20px;
  background: #111;
  color: white;
  text-align: center;
}

.story-container {
  max-width: 900px;
  margin: auto;
}

.story-section h2 {
  font-size: 36px;
  margin-bottom: 20px;
}

.story-section p {
  opacity: 0.85;
  line-height: 1.7;
  margin-bottom: 16px;
}
.fresh-section {
  padding: 80px 20px;
  background: #0d0d0d;
}

.fresh-container {
  max-width: 1100px;
  margin: auto;

  display: flex;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
}

.fresh-image img {
  width: 100%;
  border-radius: 12px;
}

.fresh-image {
  flex: 1;
  min-width: 280px;
}

.fresh-content {
  flex: 1;
  color: white;
}

.fresh-content h2 {
  font-size: 34px;
  margin-bottom: 12px;
}

.fresh-content p {
  opacity: 0.85;
  line-height: 1.7;
}
.serve-section {
  padding: 80px 20px;
  background: #111;
  text-align: center;
  color: white;
}

.serve-container {
  max-width: 1000px;
  margin: auto;
}

.serve-section h2 {
  font-size: 34px;
  margin-bottom: 40px;
}

.serve-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

.serve-card {
  padding: 18px;

  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;

  backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.1);

  font-size: 16px;
}
.choose-section {
  padding: 80px 20px;
  background: #0e0e0e;
  color: white;
}

.choose-container {
  max-width: 1000px;
  margin: auto;
  text-align: center;
}

.choose-section h2 {
  font-size: 34px;
  margin-bottom: 40px;
}

.choose-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.choose-card {
  padding: 24px;

  background: rgba(255, 255, 255, 0.05);

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(8px);
}

.choose-card h3 {
  margin-bottom: 10px;
}

.choose-card p {
  opacity: 0.8;
  font-size: 14px;
}
.community-section {
  padding: 80px 20px;
  background: #111;
  color: white;
  text-align: center;
}

.community-container {
  max-width: 800px;
  margin: auto;
}

.community-section h2 {
  font-size: 32px;
  margin-bottom: 20px;
}

.community-section p {
  opacity: 0.85;
  line-height: 1.7;
}
.review-section {
  background: black;
  color: white;

  padding: 100px 20px;
  text-align: center;
}

.review-container {
  max-width: 700px;
  margin: auto;
}

.review-container img {
  width: 140px;
  margin-bottom: 20px;
}

.review-container h2 {
  font-size: 40px;
  margin-bottom: 16px;
}

.review-container p {
  opacity: 0.7;
  line-height: 1.7;
}

.review-stars {
  color: #caa45b;
  font-size: 22px;
  margin: 18px 0;
}
footer {
  background: black;
  color: white;

  padding: 60px 20px;

  text-align: center;
}

.footer-logo {
  margin-bottom: 30px;
}

.footer-logo img {
  width: 160px;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 30px;
}

.footer-social a {
  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  border: 1px solid rgba(255, 255, 255, 0.15);

  color: white;

  font-size: 20px;

  transition: 0.3s;
}

.footer-social a:hover {
  background: #1f1f1f;
}
/* ABOUT HERO — PREMIUM STYLE */

.about-hero {
  position: relative;
  height: 65vh;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  overflow: hidden;
}

/* WOOD BACKGROUND */

.about-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: url("../assets/wood-bg.jpg") center/cover no-repeat;

  filter: blur(8px);
  transform: scale(1.1); /* prevents blur edges */

  z-index: 1;
}

/* DARK OVERLAY */

.about-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.65);

  z-index: 2;
}

/* TEXT */

.about-hero-content {
  position: relative;
  z-index: 3;

  color: white;
  max-width: 800px;
  padding: 20px;
}

.about-hero-content h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* GREEN PREMIUM LINE */

.about-hero-content h1::after {
  content: "";
  display: block;

  width: 90px;
  height: 3px;

  background: #22c55e;

  margin: 14px auto 0;

  box-shadow: 0 0 10px #22c55e;
}

.about-hero-content p {
  font-size: 18px;
  opacity: 0.9;
}
/* ABOUT HERO FIX */

.about-hero {
  position: relative;
  height: 60vh;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;

  background: url("../assets/wood-bg.jpg") center/cover no-repeat;

  overflow: hidden;
}

/* DARK OVERLAY */

.about-hero::before {
  content: "";
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.65);

  z-index: 1;
}

/* TEXT */

.about-hero-content {
  position: relative;
  z-index: 2; /* IMPORTANT */

  color: white;
  max-width: 800px;
  padding: 20px;
}

.about-hero-content h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 10px;
}

.about-hero-content p {
  font-size: 18px;
  opacity: 0.9;
}

/* GREEN LINE */

.about-hero-content h1::after {
  content: "";

  display: block;

  width: 90px;
  height: 3px;

  background: #22c55e;

  margin: 12px auto;

  box-shadow: 0 0 10px #22c55e;
}
/* ABOUT HERO */

.about-hero {
  background: url("../assets/wood-bg.jpg") center/cover no-repeat;

  padding: 120px 20px;
  position: relative;
}

.about-container {
  max-width: 1200px;
  margin: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;

  flex-wrap: wrap;
}

/* TEXT SIDE */

.about-text {
  color: white;
  max-width: 600px;
}

.about-text h1 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
}

/* RED SCRIPT */

.about-script {
  color: #ff3b3b;
  font-family: cursive;
  font-size: 52px;
  margin-right: 10px;
}

/* GREEN LINE */

.about-line {
  width: 120px;
  height: 4px;

  background: #22c55e;

  margin: 12px 0 20px 0;

  box-shadow: 0 0 10px #22c55e;
}

.about-text p {
  font-size: 20px;
  opacity: 0.9;
}

/* PIZZA IMAGE */

.about-image img {
  width: 420px;
  max-width: 100%;
}

/* MOBILE */

@media (max-width: 900px) {
  .about-container {
    flex-direction: column;
    text-align: center;
  }

  .about-line {
    margin: 12px auto 20px auto;
  }

  .about-image img {
    width: 300px;
  }

  .about-text h1 {
    font-size: 36px;
  }
}
/* ABOUT HERO */

.about-hero {
  position: relative;
  height: 65vh;

  display: flex;
  align-items: center;
  justify-content: center;

  background: url("../assets/wood-bg.jpg") center/cover no-repeat;

  overflow: hidden;
}

/* DARK OVERLAY */

.about-hero::before {
  content: "";
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.6);

  z-index: 1;
}

/* TEXT CONTAINER */

.about-container {
  position: relative;

  z-index: 2; /* IMPORTANT */

  max-width: 1200px;
  margin: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 20px;
}

/* TEXT */

.about-text {
  color: white;
  max-width: 600px;
}

.about-text h1 {
  font-size: 48px;
  line-height: 1.2;
}

/* RED SCRIPT */

.about-script {
  color: #ff3b3b;
  font-family: cursive;
  font-size: 52px;
  margin-right: 8px;
}

/* GREEN LINE */

.about-line {
  width: 110px;
  height: 4px;

  background: #22c55e;

  margin: 12px 0;

  box-shadow: 0 0 10px #22c55e;
}

/* PIZZA IMAGE */

.about-image img {
  width: 420px;
  max-width: 100%;
}
/* FIX ABOUT HERO OVERLAY */

.about-hero::before,
.about-hero::after {
  display: none !important;
}

/* Ensure hero shows properly */

.about-hero {
  background: url("../assets/wood-bg.jpg") center/cover no-repeat !important;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;

  padding: 120px 20px;
  position: relative;
}

/* TEXT ABOVE EVERYTHING */

.about-text,
.about-hero-content,
.about-container {
  position: relative;
  z-index: 10;
}
/* MAKE ABOUT HERO SMALLER */

.about-hero {
  height: 40vh !important;
  padding: 60px 20px !important;
}

/* reduce heading size slightly */

.about-text h1,
.about-hero-content h1 {
  font-size: 38px !important;
}

/* subtitle spacing */

.about-text p,
.about-hero-content p {
  margin-top: 6px;
  font-size: 16px;
}
/* GREEN LINES UNDER ABOUT TITLE */

.about-lines {
  display: flex;
  gap: 20px;
  margin: 12px 0 18px 0;
}

.about-lines span {
  display: block;

  width: 90px;
  height: 4px;

  background: #22c55e;

  border-radius: 3px;

  box-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
}
/* ABOUT HERO SIZE + CENTER FIX */

.about-hero {
  height: 50vh !important; /* makes hero taller */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* center container */

.about-container {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center;
  text-align: center;
}

/* center text block */

.about-text {
  max-width: 700px;
  margin: auto;
}
/* ABOUT HERO HEIGHT INCREASE */

.about-hero {
  height: 65vh !important; /* makes hero taller */
  padding-top: 80px;
  padding-bottom: 80px;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* keep text perfectly centered */

.about-text {
  max-width: 750px;
  margin: auto;
}

/* spacing for subtitle */

.about-text p {
  margin-top: 12px;
  font-size: 18px;
}
/* ABOUT HERO HEIGHT FIX */

.about-hero {
  min-height: 100vh !important; /* taller hero */
  padding: 120px 20px !important;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* center content */
.about-text {
  max-width: 750px;
  margin: auto;
}

/* spacing under title */
.about-text p {
  margin-top: 14px;
  font-size: 18px;
}
/* STORY SECTION */

.story-section {
  padding: 80px 20px;
  display: flex;
  justify-content: center;
}

.story-card {
  max-width: 900px;
  width: 100%;

  background: rgba(0, 0, 0, 0.75);

  border-radius: 20px;

  padding: 40px;

  display: flex;
  gap: 25px;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);

  position: relative;
}

/* red vertical line */

.story-card::before {
  content: "";

  position: absolute;

  left: 70px;
  top: 30px;
  bottom: 30px;

  width: 3px;

  background: linear-gradient(#ff3b3b, #8b0000);

  border-radius: 3px;
}

/* icon */

.story-icon {
  min-width: 50px;
  height: 50px;

  background: #ff2a2a;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  font-size: 22px;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

/* content */

.story-content {
  color: white;
}

.story-content h2 {
  font-size: 28px;

  margin-bottom: 15px;
}

.story-content p {
  color: #cfcfcf;

  line-height: 1.7;

  margin-bottom: 10px;

  font-size: 16px;
}
/* SHOW WOOD BACKGROUND IN STORY SECTION */

.story-section {
  background: transparent !important;
}

.story-card {
  background: rgba(
    0,
    0,
    0,
    0.45
  ) !important; /* dark glass effect instead of full black */
  backdrop-filter: blur(4px);
}
/* FIX STORY LINE POSITION */

.story-card::before {
  top: 70px !important; /* line icon ke neeche se start hogi */
  bottom: 30px;
}
/* FIX STORY VERTICAL LINE POSITION */

.story-card::before {
  top: 85px !important; /* icon ke neeche se start hogi */
  left: 72px;
  bottom: 35px;
}
/* FIX STORY LINE GAP FROM ICON */

.story-card::before {
  top: 90px !important; /* icon ke neeche thoda gap */
  left: 74px;
  bottom: 35px;
}
.story-card::before {
  top: 100px !important;
}
/* ALIGN STORY LINE WITH ICON CENTER */

.story-card::before {
  left: 65px !important; /* line icon ke center mein aayegi */
  top: 95px !important; /* icon ke neeche se start */
  bottom: 35px;
}
/* HERO MOBILE */

@media (max-width: 768px) {
  .about-hero {
    min-height: 45vh;
    padding: 80px 20px;
    text-align: center;
  }

  .about-text h1 {
    font-size: 30px;
    line-height: 1.2;
  }

  .about-text p {
    font-size: 14px;
    margin-top: 8px;
  }

  .about-lines span {
    width: 45px;
    height: 3px;
  }
}
/* STORY MOBILE */

@media (max-width: 768px) {
  .story-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 20px;
  }

  .story-icon {
    margin-bottom: 15px;
  }

  .story-card::before {
    display: none; /* mobile pe vertical line hata dete hain */
  }

  .story-content h2 {
    font-size: 22px;
  }

  .story-content p {
    font-size: 14px;
    line-height: 1.6;
  }
}
/* MADE FRESH SECTION */

.fresh-section {
  padding: 90px 40px;
  background: transparent;
}

.fresh-container {
  display: flex;
  align-items: center;
  gap: 60px;
  max-width: 1200px;
  margin: auto;
}

/* IMAGE */

.fresh-image img {
  width: 100%;
  max-width: 480px;

  border-radius: 18px;

  border: 4px solid rgba(255, 255, 255, 0.8);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* TEXT */

.fresh-content {
  max-width: 520px;
  color: white;
}

/* HEADING */

.fresh-content h2 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 20px;
}

/* make Fresh word green */

.fresh-content h2 span {
  color: #22c55e;
  font-style: italic;
}

/* description */

.fresh-content p {
  font-size: 17px;
  line-height: 1.7;
  color: #d1d5db;
  margin-bottom: 20px;
}

/* green underline */

.fresh-content::after {
  content: "";
  display: block;

  width: 80px;
  height: 4px;

  background: #22c55e;

  margin-top: 15px;

  border-radius: 3px;
}
@media (max-width: 768px) {
  .fresh-container {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .fresh-content h2 {
    font-size: 30px;
  }

  .fresh-image img {
    max-width: 100%;
  }

  .fresh-content::after {
    margin: auto;
    margin-top: 15px;
  }
}
/* FIX MADE FRESH IMAGE HEIGHT */

.fresh-image img {
  width: 100%;
  max-width: 480px;

  height: 340px; /* control height */
  object-fit: cover; /* prevents stretching */

  border-radius: 18px;
}
/* WHAT WE SERVE SECTION UPGRADE */

.serve-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  max-width: 1000px;
  margin: auto;
  margin-top: 40px;
}

.serve-card {
  background: rgba(0, 0, 0, 0.65);
  border-radius: 18px;
  padding: 30px 20px;
  text-align: center;

  border: 1px solid rgba(255, 255, 255, 0.08);

  transition: all 0.3s ease;
}

.serve-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
}

.serve-card img {
  width: 70px;
  margin-bottom: 15px;
}

.serve-card h3 {
  color: white;
  font-size: 18px;
  font-weight: 500;
}
/* REMOVE BLACK SECTION BACKGROUND */

.what-we-serve {
  background: transparent !important;
}

/* GLASS CARDS */

.serve-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;

  padding: 18px 25px;
}

/* HOVER EFFECT */

.serve-card:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
}
/* remove section black background */
.what-we-serve {
  background: transparent !important;
}

/* keep cards bigger */
.serve-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);

  padding: 28px 40px; /* card size bada */
  min-width: 220px; /* width fix */
  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.15);
}
/* remove black background from What We Serve section */
.serve-section {
  background: transparent !important;
}
/* RED CARD */
.serve-card:nth-child(1),
.serve-card:nth-child(3),
.serve-card:nth-child(5) {
  background: linear-gradient(135deg, #7a0000, #2a0000);
  color: white;
  border-radius: 18px;
  padding: 20px 35px;
}

/* GREEN CARD */
.serve-card:nth-child(2),
.serve-card:nth-child(4),
.serve-card:nth-child(6) {
  background: linear-gradient(135deg, #013d12, #001a07);
  color: white;
  border-radius: 18px;
  padding: 20px 35px;
}

/* glow effect like inspo */
.serve-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  transition: 0.3s;
}

.serve-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.6);
}
/* ---------- WHAT WE SERVE HEADING ---------- */

.serve-container h2 {
  text-align: center;
  font-size: 32px;
  margin-bottom: 40px;
  position: relative;
}

.serve-container h2::before,
.serve-container h2::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 80px;
  height: 3px;
  background: #28c76f;
}

.serve-container h2::before {
  left: calc(50% - 180px);
}

.serve-container h2::after {
  right: calc(50% - 180px);
}

/* ---------- GRID SPACING ---------- */

.serve-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* ---------- GLASSY LIGHT GRADIENT CARDS ---------- */

.serve-card {
  padding: 18px 36px;
  border-radius: 14px;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.15);

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
  font-size: 15px;
}

/* red cards (lighter) */
.serve-card:nth-child(odd) {
  background: linear-gradient(
    135deg,
    rgba(160, 30, 30, 0.75),
    rgba(60, 10, 10, 0.65)
  );
}

/* green cards (lighter) */
.serve-card:nth-child(even) {
  background: linear-gradient(
    135deg,
    rgba(40, 120, 60, 0.75),
    rgba(10, 45, 20, 0.65)
  );
}

/* hover premium feel */

.serve-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.6);
}
/* WHAT WE SERVE HEADING FIX */

.serve-container h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  font-size: 32px;
  margin-bottom: 40px;
}

/* lines */

.serve-container h2::before,
.serve-container h2::after {
  content: "";
  flex: 0 0 80px;
  height: 3px;
  background: #28c76f;
  border-radius: 3px;
}
/* MOBILE VERSION */

@media (max-width: 768px) {
  /* heading */

  .serve-container h2 {
    font-size: 24px;
    gap: 10px;
  }

  .serve-container h2::before,
  .serve-container h2::after {
    flex: 0 0 40px;
    height: 2px;
  }

  /* grid */

  .serve-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 0 15px;
  }

  /* cards */

  .serve-card {
    padding: 14px 16px;
    font-size: 14px;
    border-radius: 12px;
    text-align: center;
  }

  /* emoji/icon size */

  .serve-card span,
  .serve-card i {
    font-size: 18px;
    margin-right: 6px;
  }
}
/* WHAT WE SERVE HEADING FIX */
.serve-container h2 {
  position: relative;
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 40px;
}

.serve-container h2::before,
.serve-container h2::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 80px;
  height: 3px;
  background: #32d17c;
}

.serve-container h2::before {
  left: 30%;
  transform: translateY(-50%);
}

.serve-container h2::after {
  right: 30%;
  transform: translateY(-50%);
}
/* DARK OVERLAY FOR WHAT WE SERVE SECTION */
.serve-section {
  position: relative;
}

.serve-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35); /* overlay darkness */
  z-index: 0;
  border-radius: 20px;
}

/* keep content above overlay */
.serve-container {
  position: relative;
  z-index: 1;
}
/* WHY CHOOSE HEADING STYLE */
.choose-container h2 {
  position: relative;
  text-align: center;
  margin-bottom: 40px;
}

.choose-container h2::before,
.choose-container h2::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 70px;
  height: 3px;
  background: #39d98a;
}

.choose-container h2::before {
  left: 32%;
}

.choose-container h2::after {
  right: 32%;
}
/* WHY CHOOSE SECTION BAR STYLE */
.choose-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  padding: 25px 40px;

  background: linear-gradient(135deg, #7a0c0c, #c91c1c);
  border-radius: 25px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.choose-card {
  flex: 1;
  text-align: center;
  background: transparent;
  border: none;
  color: white;
  padding: 10px 20px;
}

.choose-card h3 {
  font-size: 18px;
  margin-bottom: 5px;
}

.choose-card p {
  font-size: 13px;
  opacity: 0.8;
}

/* vertical divider */
.choose-card:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}
.choose-card i {
  font-size: 28px;
  margin-bottom: 10px;
  display: block;
}
/* WHY CHOOSE SECTION BACKGROUND FIX */
.choose-section {
  background: transparent;
  padding: 80px 0;
}

/* glass effect container */
.choose-container {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 25px;
  padding: 40px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}
/* REMOVE GREEN DIVIDER FROM WHY CHOOSE HEADING */
.choose-container h2::before,
.choose-container h2::after {
  display: none !important;
  content: none;
}
/* REMOVE GLASS FROM SECTION */
.choose-container {
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 0;
}

/* KEEP RED BAR NORMAL */
.choose-grid {
  background: linear-gradient(135deg, #7a0c0c, #c91c1c);
  border-radius: 25px;
  padding: 30px;
}
/* ===== WHY CHOOSE MOBILE VERSION ===== */
@media (max-width: 768px) {
  .choose-grid {
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px;
    border-radius: 18px;
  }

  .choose-card {
    flex: 1 1 calc(50% - 12px);
    border-right: none !important;
    padding: 14px 10px;
  }

  .choose-card h3 {
    font-size: 15px;
  }

  .choose-card p {
    font-size: 12px;
    line-height: 1.4;
  }

  /* divider remove on mobile */
  .choose-card::after {
    display: none;
  }
}
/* ===== PROUD COMMUNITY SECTION ===== */

.community-section {
  padding: 90px 20px;
  text-align: center;
  position: relative;
}

/* container */
.community-container {
  max-width: 850px;
  margin: auto;
}

/* heading */
.community-container h2 {
  font-size: 38px;
  margin-bottom: 30px;
  position: relative;
}

/* green divider */
.community-container h2::after {
  content: "";
  display: block;
  width: 90px;
  height: 3px;
  background: #2ecc71;
  margin: 14px auto 0;
  border-radius: 3px;
}

/* glass card */
.community-card {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 35px 30px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

/* text */
.community-card p {
  font-size: 17px;
  line-height: 1.7;
  color: #ddd;
}
/* remove black background */
.community-section {
  background: transparent !important;
}

/* glass card only */
.community-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 30px;
}

/* text color better contrast */
.community-card p {
  color: #eee;
}
/* MOBILE VERSION */

@media (max-width: 768px) {
  .community-section {
    padding: 60px 20px;
  }

  .community-container h2 {
    font-size: 26px;
    line-height: 1.3;
  }

  .community-container h2::after {
    width: 70px;
    height: 3px;
    margin-top: 10px;
  }

  /* glass card mobile */
  .community-card {
    padding: 22px 18px;
    border-radius: 14px;
  }

  /* paragraph text */
  .community-card p {
    font-size: 15px;
    line-height: 1.6;
  }
}
/* REVIEW SECTION */

.review-section {
  padding: 90px 20px;
  text-align: center;
  position: relative;
}

/* heading */

.review-section h2 {
  font-size: 40px;
  margin-bottom: 10px;
}

/* description */

.review-text {
  color: #ddd;
  font-size: 18px;
  max-width: 650px;
  margin: auto;
  margin-bottom: 35px;
}

/* QR glass card */

.qr-card {
  display: inline-block;
  padding: 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.qr-card img {
  width: 180px;
  border-radius: 12px;
}

/* stars */

.review-stars {
  margin-top: 20px;
  font-size: 22px;
  letter-spacing: 4px;
}
/* REMOVE BLACK BACKGROUND FROM REVIEW SECTION */

.review-section {
  background: transparent !important;
}

/* agar kisi container me bhi black laga ho */
.review-container {
  background: transparent !important;
}
/* DARK OVERLAY FOR REVIEW SECTION */

.review-section {
  position: relative;
}

.review-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.45); /* overlay darkness */

  z-index: 0;
}

/* content above overlay */

.review-section * {
  position: relative;
  z-index: 2;
}
/* VISIT BAR */

.visit-bar-section {
  padding: 60px 20px;
  display: flex;
  justify-content: center;
}

.visit-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  max-width: 850px;
  width: 100%;

  background: linear-gradient(135deg, #1e8f4d, #2ecc71);

  padding: 18px 28px;
  border-radius: 40px;

  text-decoration: none;
  color: white;

  font-size: 20px;
  font-weight: 600;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);

  transition: 0.3s;
}

/* hover effect */

.visit-bar:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
}

/* arrow */

.visit-arrow {
  font-size: 26px;
}
@media (max-width: 768px) {
  .visit-bar {
    font-size: 16px;
    padding: 16px 20px;
  }

  .visit-arrow {
    font-size: 22px;
  }
}
/* FOOTER */

.footer {
  background: #000;
  padding: 120px 20px;
  text-align: center;
}

.footer-container {
  max-width: 900px;
  margin: auto;
}

/* logo */

.footer-logo {
  width: 160px;
  margin-bottom: 30px;
}

/* heading */

.footer h2 {
  font-size: 48px;
  margin-bottom: 20px;
}

/* stars */

.footer-stars {
  color: #c89b3c;
  letter-spacing: 10px;
  margin-bottom: 25px;
}

/* review */

.footer-review {
  color: #cfcfcf;
  font-size: 20px;
  line-height: 1.7;
  max-width: 700px;
  margin: auto;
  margin-bottom: 20px;
}

/* author */

.footer-author {
  color: #888;
  margin-bottom: 60px;
}

/* icons */

.footer-social {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.footer-social a {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);

  display: flex;
  align-items: center;
  justify-content: center;

  color: white;
  font-size: 22px;

  transition: 0.3s;
}

.footer-social a:hover {
  background: #c89b3c;
  color: black;
}
@media (max-width: 768px) {
  .footer {
    padding: 80px 20px;
  }

  .footer h2 {
    font-size: 34px;
  }

  .footer-review {
    font-size: 16px;
  }

  .footer-social a {
    width: 50px;
    height: 50px;
    font-size: 18px;
  }
}
/* HERO MOBILE SPACING */

@media (max-width: 768px) {
  .hero {
    padding-top: 120px; /* header se gap */
    padding-bottom: 80px;
  }
}
@media (max-width: 768px) {
  .hero-section {
    padding-top: 120px;
    padding-bottom: 80px;
  }
}
@media (max-width: 768px) {
  .hero h1::after {
    margin-left: 15px;
  }
}
@media (max-width: 768px) {
  .about-lines {
    margin-left: 20px;
  }
}
/* mobile hero spacing fix */
@media (max-width: 768px) {
  .about-text {
    padding-left: 20px;
    padding-right: 20px;
  }
}
/* MOBILE FIX */
@media (max-width: 768px) {
  /* section spacing */
  section {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* title lines fix */
  .about-lines,
  .title-lines,
  .section-lines {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
  }

  /* cards spacing */
  .serve-grid,
  .cards,
  .grid {
    padding-left: 4px;
    padding-right: 4px;
  }

  /* card buttons gap */
  .serve-grid a,
  .cards a {
    margin-bottom: 12px;
  }
}
/* MOBILE FIX FOR WHAT WE SERVE */
@media (max-width: 768px) {
  .serve-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .serve-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .serve-card {
    margin: 0;
    padding: 14px 16px;
  }
}
/* MOBILE FINAL FIX */
@media (max-width: 768px) {
  /* section side spacing */
  .serve-container {
    padding: 0 18px;
  }

  /* grid spacing */
  .serve-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  /* card spacing */
  .serve-card {
    width: 100%;
    box-sizing: border-box;
  }

  /* heading divider fix */
  .serve-container h2 {
    text-align: center;
    position: relative;
  }

  .serve-container h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background: #3bb54a;
    margin: 10px auto 0;
    border-radius: 2px;
  }
}
/* MOBILE FIX */
@media (max-width: 768px) {
  /* heading divider neeche lana */
  .serve-section h2 {
    position: relative;
    text-align: center;
  }

  .serve-section h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background: #3bb54a;
    margin: 10px auto 0;
    border-radius: 3px;
  }

  /* cards side gap */
  .serve-container {
    padding: 0 16px;
  }

  /* grid spacing */
  .serve-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}
/* MOBILE – fix heading line overlapping */
@media (max-width: 768px) {
  /* h2 par agar koi line aa rahi ho to hata do */
  .serve-section h2 {
    border: none !important;
    background: none !important;
    text-decoration: none !important;
    position: static !important;
  }

  /* agar ::before / ::after se line aa rahi ho to hide */
  .serve-section h2::before,
  .serve-section h2::after {
    content: none !important;
    display: none !important;
  }

  /* proper divider line below heading */
  .serve-section .serve-container h2 + .divider {
    width: 60px;
    height: 4px;
    background: #3bb54a;
    margin: 10px auto 18px;
    border-radius: 3px;
  }
}
@media (max-width: 768px) {
  .serve-grid {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
}
/* FORCE MOBILE SIDE GAP */
@media (max-width: 768px) {
  .serve-section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .serve-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .serve-grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .serve-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}
/* MOBILE SIDE GAP FIX */
@media (max-width: 768px) {
  .serve-grid {
    width: 92% !important;
    margin: 0 auto !important;
    gap: 12px;
  }
}
/* Mobile side spacing fix */
@media (max-width: 768px) {
  .serve-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
/* Mobile card size fix */
@media (max-width: 768px) {
  .serve-grid {
    padding: 0 14px !important;
  }

  .serve-card {
    width: 92% !important;
    margin: 8px auto !important;
  }
}
/* MOBILE FIX FOR WHAT WE SERVE */
@media (max-width: 768px) {
  .serve-section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .serve-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .serve-card {
    width: 100% !important;
  }
}
/* hamburger hidden on desktop */
.hamburger {
  display: none;
  font-size: 28px;
  color: white;
  cursor: pointer;
}
/* MOBILE FIX – What We Serve spacing */
@media (max-width: 768px) {
  .serve-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .serve-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .serve-card {
    width: 100% !important;
  }
}
/* HAMBURGER DEFAULT */
.hamburger {
  display: none;
  font-size: 28px;
  color: white;
  cursor: pointer;
}

/* MOBILE NAVBAR */
@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    background: #111;
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    text-align: center;
  }

  .nav-links.active {
    display: flex;
  }

  .hamburger {
    display: block;
    position: absolute;
    right: 20px;
    top: 20px;
  }
}
/* HAMBURGER ICON */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 22px;
  z-index: 999;
}

.hamburger span {
  width: 26px;
  height: 3px;
  background: white;
  margin: 4px 0;
  border-radius: 2px;
  display: block;
}

/* MOBILE */
@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }

  .nav-links {
    display: none;
  }

  .nav-links.active {
    display: flex;
    flex-direction: column;
  }
}
/* NAVBAR FIX */
.navbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
}

/* HAMBURGER */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

/* LINES */
.hamburger span {
  width: 26px;
  height: 3px;
  background: #ffffff;
  border-radius: 2px;
  display: block;
}

/* MOBILE */
@media (max-width: 768px) {
  .hamburger {
    display: flex;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
  }

  .nav-links {
    display: none;
  }

  .nav-links.active {
    display: flex;
    flex-direction: column;
  }
}
/* FULL SCREEN MOBILE MENU */
@media (max-width: 768px) {
  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;
    transform: translateY(-100%);
    transition: 0.35s ease;
    z-index: 900;
  }

  .nav-links.active {
    transform: translateY(0);
  }
}
/* WHITE HAMBURGER ICON */
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
}

.hamburger span {
  width: 28px;
  height: 3px;
  background: #ffffff;
  border-radius: 2px;
  display: block;
}
/* WHITE HAMBURGER ICON */
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
}

.hamburger span {
  width: 28px;
  height: 3px;
  background: #ffffff;
  border-radius: 2px;
  display: block;
}
/* FORCE SAME HAMBURGER ON ALL PAGES */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 22px;
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 18px;
  z-index: 9999;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  background: white;
  border-radius: 2px;
}
/* FIX HAMBURGER VISIBILITY */
.hamburger {
  position: absolute;
  right: 20px;
  top: 22px;
  width: 34px;
  height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 9999;
}

.hamburger span {
  display: block;
  height: 4px;
  width: 100%;
  background: #ffffff;
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.7); /* makes it visible on red */
}
/* Divider lines inside red card */
.choose-grid {
  position: relative;
}

/* vertical line */
.choose-grid::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}

/* horizontal line */
.choose-grid::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}
/* Remove green line under hero heading */
.hero h1::after,
.hero-title::after {
  display: none !important;
}
/* Force remove green divider */
.hero-line,
.title-line,
.hero-divider {
  display: none !important;
}
/* ================= HERO ================= */

.catering-hero {
  background: url("images/wood-bg.jpg") center/cover no-repeat;
  padding: 90px 20px;
  text-align: center;
  color: white;
}

.catering-hero h1 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 10px;
}

.catering-hero p {
  font-size: 18px;
  opacity: 0.9;
  margin-bottom: 25px;
}

/* ================= CALL BUTTON ================= */

.catering-call {
  display: inline-block;
  background: linear-gradient(180deg, #4caf50, #1f6b2a);
  padding: 14px 28px;
  border-radius: 40px;
  font-size: 18px;
  font-weight: 600;
  color: white;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* ================= CATEGORY BUTTONS ================= */

.catering-categories {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 25px 10px;
  flex-wrap: wrap;
}

.cat-btn {
  background: #7a0000;
  padding: 12px 20px;
  border-radius: 12px;
  color: white;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ================= MENU SECTION ================= */

.catering-section {
  max-width: 900px;
  margin: auto;
  padding: 40px 20px;
}

.catering-section h2 {
  text-align: center;
  font-size: 32px;
  margin-bottom: 30px;
  color: white;
  position: relative;
}

/* ================= MENU CARD ================= */

.menu-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg, #7a0000, #5a0000);
  padding: 22px;
  border-radius: 16px;
  margin-bottom: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

.menu-left h3 {
  font-size: 20px;
  margin-bottom: 6px;
}

.menu-left p {
  font-size: 14px;
  opacity: 0.8;
}

.menu-price {
  font-size: 22px;
  font-weight: 700;
  color: #ffd66b;
}

/* ================= CTA ================= */

.catering-cta {
  text-align: center;
  padding: 70px 20px;
}

.catering-cta h2 {
  font-size: 34px;
  margin-bottom: 10px;
}

.catering-cta p {
  opacity: 0.9;
  margin-bottom: 20px;
}

.cta-btn {
  background: linear-gradient(180deg, #4caf50, #1f6b2a);
  padding: 14px 32px;
  border-radius: 40px;
  font-size: 18px;
  font-weight: 600;
  color: white;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* ================= MOBILE ================= */

@media (max-width: 768px) {
  .menu-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .menu-price {
    font-size: 20px;
  }

  .catering-hero h1 {
    font-size: 30px;
  }
}
.catering-section {
  max-width: 900px;
  margin: auto;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.menu-card {
  width: 100%;
  max-width: 850px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg, #7a0000, #4a0000);
  padding: 22px 25px;
  border-radius: 18px;
  margin-bottom: 18px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
}

.menu-left {
  max-width: 75%;
}

.menu-left h3 {
  font-size: 22px;
  margin-bottom: 6px;
}

.menu-left p {
  font-size: 15px;
  opacity: 0.85;
}

.menu-price {
  font-size: 26px;
  font-weight: 700;
  color: #ffd66b;
}
.menu-card {
  width: 100%;
  max-width: 850px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  background: rgba(120, 0, 0, 0.55); /* transparent red */
  backdrop-filter: blur(6px); /* glass effect */

  padding: 22px 25px;
  border-radius: 18px;
  margin-bottom: 18px;

  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}
.catering-hero {
  position: relative;
  background: url("images/wood-bg.jpg") center/cover no-repeat;
  padding: 100px 20px;
  text-align: center;
  color: white;
  z-index: 1;
}

.catering-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55); /* black overlay */
  z-index: -1;
}
@media (max-width: 768px) {
  /* HERO */

  .catering-hero {
    padding: 70px 20px;
  }

  .catering-hero h1 {
    font-size: 28px;
  }

  .catering-hero p {
    font-size: 15px;
  }

  .catering-call {
    font-size: 16px;
    padding: 12px 22px;
  }

  /* CATEGORY BUTTONS */

  .catering-categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 20px;
  }

  .cat-btn {
    text-align: center;
    font-size: 14px;
    padding: 10px;
  }

  /* MENU SECTION */

  .catering-section {
    padding: 30px 15px;
  }

  .catering-section h2 {
    font-size: 26px;
  }

  /* MENU CARDS */

  .menu-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 18px;
  }

  .menu-left {
    max-width: 100%;
  }

  .menu-left h3 {
    font-size: 18px;
  }

  .menu-left p {
    font-size: 13px;
  }

  .menu-price {
    font-size: 20px;
  }

  /* CTA */

  .catering-cta {
    padding: 50px 20px;
  }

  .catering-cta h2 {
    font-size: 26px;
  }
}
@media (max-width: 768px) {
  .menu-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 20px;
  }

  .menu-left {
    width: 100%;
  }

  .menu-price {
    display: block;
    width: 100%;
    margin-top: 5px;
    font-size: 22px;
    font-weight: 700;
    color: #ffd66b;
  }
}
.catering-item {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.catering-item span {
  margin-top: 10px;
  font-size: 20px;
  font-weight: 700;
  color: #ffd66b;
  display: block;
}
.catering-item h3 {
  min-height: 48px;
  display: flex;
  align-items: center;
}
.menu-left {
  flex: 1;
  padding-right: 20px;
}
.menu-card {
  padding: 22px 24px;
  box-sizing: border-box;
}
.card:first-child h3,
.card:first-child p,
.card:first-child span {
  padding-left: 20px;
}
#wings {
  padding-left: 15px; /* Adjust this number to match the other cards */
  display: flex; /* Ensures the internal layout stays aligned */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
/* Fix for 48 Wings card alignment */
#wings {
  padding-left: 20px !important;
  display: block !important;
}

#wings .menu-left {
  width: 70%;
  display: inline-block;
  vertical-align: middle;
}

#wings .menu-price {
  width: 25%;
  display: inline-block;
  vertical-align: middle;
  text-align: right;
}
/* Fix menu card images for desktop + mobile */

.menu-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Make card image area flexible */
.menu-card {
  overflow: hidden;
}

/* Extra safety for mobile */
@media (max-width: 768px) {
  .menu-card img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}
/* Mobile fix for Explore Our Menu card */

@media (max-width: 768px) {
  .explore-menu-card img {
    width: 100%;
    height: auto !important;
    object-fit: contain !important;
    display: block;
  }

  .explore-menu-card {
    height: auto !important;
  }
}
/* MENU HERO */

.menu-hero {
  position: relative;
  height: 70vh;
  background: url("../assets/pizza_works.jpg") center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* dark overlay */

.menu-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
}

/* text */

.menu-hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  padding: 20px;
}

.menu-hero h1 {
  font-size: 56px;
  color: #fff;
  margin-bottom: 15px;
}

.menu-hero p {
  font-size: 20px;
  color: #eee;
}
/* MENU HERO FIX */

.menu-hero {
  min-height: 85vh;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

/* dark overlay */

.menu-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
}

/* text above overlay */

.menu-hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
}

/* mobile fix */

@media (max-width: 768px) {
  .menu-hero {
    min-height: 60vh;
    background-size: cover !important;
  }
}
/* MENU HERO FULL WIDTH FIX */

.menu-hero {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
}
/* MENU HERO */

.menu-hero {
  height: 80vh;

  background-image:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    url("images/pizza-works.jpeg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* hero text */

.menu-title {
  font-size: 64px;
  color: #f4e0b2;
  font-family: "Playfair Display", serif;
  margin-bottom: 15px;
}

.menu-subtitle {
  font-size: 20px;
  color: #ffffff;
  max-width: 650px;
  margin: auto;
  margin-bottom: 30px;
  line-height: 1.6;
}

/* buttons container */

.menu-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

/* gold button */

.btn-gold {
  background: #d4a017;
  color: #fff;

  padding: 14px 30px;
  border-radius: 8px;

  text-decoration: none;
  font-weight: 600;

  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
  transition: 0.3s;
}

.btn-gold:hover {
  background: #e0b52d;
}

/* red button */

.btn-red {
  background: #b31313;
  color: #fff;

  padding: 14px 30px;
  border-radius: 8px;

  text-decoration: none;
  font-weight: 600;

  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
  transition: 0.3s;
}

.btn-red:hover {
  background: #d91c1c;
}

/* mobile */

@media (max-width: 768px) {
  .menu-title {
    font-size: 38px;
  }

  .menu-subtitle {
    font-size: 16px;
  }

  .menu-buttons {
    flex-direction: column;
    gap: 12px;
  }

  .menu-hero {
    height: 65vh;
  }
}
.menu-hero {
  position: relative;
  width: 100%;
  height: 75vh;

  background-image:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    url("../assets/pizza_works.jpg");

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.menu-hero {
  height: 75vh;

  background-image:
    linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)),
    url("../assets/pizza_works.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* MENU CATEGORY BAR */
.menu-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;

  padding: 25px 20px;
  margin-top: -35px;

  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* CATEGORY BUTTONS */
.menu-categories a {
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;

  padding: 10px 18px;
  border-radius: 30px;

  color: white;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  border: 1px solid rgba(255, 255, 255, 0.15);

  transition: all 0.25s ease;
}

/* RED GLASS */
.menu-categories a:nth-child(odd) {
  background: linear-gradient(135deg, #c4161c, #ff4d4f);
}

/* GREEN GLASS */
.menu-categories a:nth-child(even) {
  background: linear-gradient(135deg, #0f9d58, #2ecc71);
}

/* HOVER EFFECT */
.menu-categories a:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
/* CATEGORY BAR */
.menu-categories {
  display: flex;
  gap: 12px;

  overflow-x: auto;
  overflow-y: hidden;

  white-space: nowrap;

  padding: 18px 25px;
  margin-top: 25px;

  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;

  scroll-behavior: smooth;
}

/* Hide scrollbar (optional) */
.menu-categories::-webkit-scrollbar {
  display: none;
}

/* CATEGORY BUTTON */
.menu-categories a {
  flex: 0 0 auto;

  text-decoration: none;
  font-weight: 600;
  font-size: 14px;

  padding: 10px 18px;
  border-radius: 30px;

  color: white;

  transition: all 0.25s ease;
}

/* RED */
.menu-categories a:nth-child(odd) {
  background: linear-gradient(135deg, #c4161c, #ff4d4f);
}

/* GREEN */
.menu-categories a:nth-child(even) {
  background: linear-gradient(135deg, #0f9d58, #2ecc71);
}

/* HOVER */
.menu-categories a:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.35);
}
/* ===== MENU CATEGORY FIX (ADD AT END OF CSS) ===== */

.menu-categories {
  display: flex !important;
  flex-wrap: nowrap !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  gap: 12px;
  padding: 18px 20px;

  white-space: nowrap;
  scroll-behavior: smooth;

  margin-top: 25px;

  max-width: 100%;
}

/* hide scrollbar */
.menu-categories::-webkit-scrollbar {
  display: none;
}

/* category buttons */
.menu-categories a {
  flex: 0 0 auto;

  padding: 10px 18px;
  border-radius: 30px;

  font-size: 14px;
  font-weight: 600;

  text-decoration: none;
  color: #fff;

  transition: 0.25s ease;
}

/* red buttons */
.menu-categories a:nth-child(odd) {
  background: linear-gradient(135deg, #c4161c, #ff4d4f);
}

/* green buttons */
.menu-categories a:nth-child(even) {
  background: linear-gradient(135deg, #0f9d58, #2ecc71);
}

/* hover */
.menu-categories a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* ===== MOBILE FIX ===== */

@media (max-width: 768px) {
  .menu-hero {
    height: 60vh;
    padding: 0 20px;
    text-align: center;
  }

  .menu-hero h1 {
    font-size: 36px;
  }

  .menu-hero p {
    font-size: 15px;
  }

  .menu-categories {
    padding: 14px 10px;
    gap: 10px;
  }

  .menu-categories a {
    font-size: 13px;
    padding: 8px 14px;
  }
}
/* ===== HOUSE FAVORITES GRID ===== */

.favorites-section {
  max-width: 1200px;
  margin: auto;
  padding: 40px 20px;
}

.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
}

/* ===== CARD ===== */

.favorite-card {
  background: #1e1e1e;
  border-radius: 18px;
  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.12);

  transition: 0.25s ease;
}

.favorite-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
}

/* ===== IMAGE ===== */

.favorite-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* ===== CONTENT ===== */

.favorite-content {
  padding: 20px;
  text-align: center;
}

/* title + price row */

.favorite-title {
  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: 18px;
  font-weight: 700;
  color: white;

  margin-bottom: 10px;
}

.favorite-title span:last-child {
  color: #f4c542;
  font-weight: 700;
}

/* description */

.favorite-content p {
  font-size: 14px;
  color: #bfbfbf;
  line-height: 1.5;
}
/* ===== HOUSE FAVORITES HEADER ===== */

.favorites-header {
  text-align: center;
  margin-bottom: 35px;
}

/* Heading */
.favorites-header h2 {
  font-size: 42px;
  font-weight: 700;
  color: white;
  margin-bottom: 10px;
  position: relative;
  display: inline-block;
  padding: 0 20px;
}

/* Golden lines */
.favorites-header h2::before,
.favorites-header h2::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 90px;
  height: 3px;
  background: linear-gradient(90deg, #f4c542, #ffd86b);
}

.favorites-header h2::before {
  right: 100%;
  margin-right: 15px;
}

.favorites-header h2::after {
  left: 100%;
  margin-left: 15px;
}

/* Description */
.favorites-header p {
  font-size: 16px;
  color: #cfcfcf;
  max-width: 550px;
  margin: auto;
  line-height: 1.6;
}
/* ===== DARK OVERLAY FOR HOUSE FAVORITES ===== */

.favorites-section {
  position: relative;
  padding: 60px 20px;
}

.favorites-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.45);
  z-index: 0;
}

.favorites-section > * {
  position: relative;
  z-index: 2;
}
/* ===== PICK UP SPECIALS ===== */

.pickup-section {
  max-width: 1000px;
  margin: 70px auto;
  padding: 0 20px;
}

/* header */

.pickup-section .section-header {
  text-align: center;
  margin-bottom: 35px;
}

.pickup-section h2 {
  font-size: 38px;
  color: white;
  margin-bottom: 8px;
}

.pickup-section p {
  color: #cfcfcf;
  font-size: 15px;
}

/* list container */

.pickup-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* item */

.pickup-item {
  display: flex;
  justify-content: space-between;
  align-items: center;

  background: rgba(20, 20, 20, 0.85);
  padding: 18px 22px;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  transition: 0.25s ease;
}

.pickup-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

/* text */

.pickup-item h4 {
  color: white;
  font-size: 17px;
  margin-bottom: 4px;
}

.pickup-item p {
  font-size: 13px;
  color: #a5a5a5;
}

/* price */

.pickup-item .price {
  font-size: 18px;
  font-weight: 700;

  background: linear-gradient(135deg, #c4161c, #ff4d4f);
  color: white;

  padding: 8px 16px;
  border-radius: 30px;
}
/* ===== PICK UP SPECIALS HEADING LINES ===== */

.pickup-section .section-header {
  text-align: center;
  margin-bottom: 35px;
}

.pickup-section .section-header h2 {
  font-size: 40px;
  font-weight: 700;
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* golden lines */

.pickup-section .section-header h2::before,
.pickup-section .section-header h2::after {
  content: "";
  flex: 1;
  height: 3px;

  background: linear-gradient(90deg, #f4c542, #ffd86b);
  max-width: 120px;
}
/* ===== MOBILE MENU CATEGORY SCROLL ===== */

@media (max-width: 768px) {
  .menu-categories {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;

    padding: 12px 15px;

    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  /* hide scrollbar */
  .menu-categories::-webkit-scrollbar {
    display: none;
  }

  .menu-categories a {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}
/* ===== MOBILE PICKUP SPECIALS ===== */

@media (max-width: 768px) {
  .pickup-section {
    padding: 40px 18px;
  }

  .pickup-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* pickup card */

  .pickup-item {
    display: flex;
    justify-content: space-between;
    align-items: center;

    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);

    padding: 16px 18px;
    border-radius: 12px;

    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  /* title */

  .pickup-item h4 {
    font-size: 15px;
    font-weight: 600;
    color: white;
    margin-bottom: 3px;
  }

  /* small text */

  .pickup-item p {
    font-size: 13px;
    color: #cfcfcf;
  }

  /* price */

  .pickup-item .price {
    font-size: 18px;
    font-weight: 700;
    color: #f4c542;
  }
}
/* ===== MOBILE CATEGORY SCROLL FIX ===== */

@media (max-width: 768px) {
  .menu-categories {
    display: flex;
    flex-wrap: nowrap;

    overflow-x: auto;
    overflow-y: hidden;

    padding-left: 16px;
    padding-right: 16px;

    margin-left: 0;
    margin-right: 0;

    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  /* prevent shrinking */
  .menu-categories a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* hide scrollbar */
  .menu-categories::-webkit-scrollbar {
    display: none;
  }
}
/* ===== MOBILE CATEGORY SCROLL FIX ===== */

@media (max-width: 768px) {
  .menu-categories {
    display: flex;
    flex-wrap: nowrap;

    overflow-x: auto;
    overflow-y: hidden;

    padding-left: 16px;
    padding-right: 16px;

    margin-left: 0;
    margin-right: 0;

    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  /* prevent shrinking */
  .menu-categories a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* hide scrollbar */
  .menu-categories::-webkit-scrollbar {
    display: none;
  }
}
/* ===== ROYAL PIZZA SECTION ===== */

.royal-pizza-section {
  padding: 80px 20px;
  position: relative;
}

/* HEADER */

.royal-header {
  text-align: center;
  margin-bottom: 40px;
}

.royal-header h2 {
  font-size: 40px;
  font-weight: 700;
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* golden lines */

.royal-header h2::before,
.royal-header h2::after {
  content: "";
  flex: 1;
  height: 3px;
  max-width: 120px;

  background: linear-gradient(90deg, #f4c542, #ffd86b);
}

.royal-header p {
  margin-top: 10px;
  color: #cfcfcf;
  font-size: 16px;
}

/* GRID */

.royal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
}

/* CARD */

.royal-card {
  background: #1f1f1f;
  border-radius: 14px;
  overflow: hidden;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);

  transition: transform 0.3s ease;
}

.royal-card:hover {
  transform: translateY(-6px);
}

/* IMAGE */

.royal-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* CONTENT */

.royal-content {
  padding: 18px;
}

.royal-title {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  color: white;
  margin-bottom: 6px;
}

.royal-title span:last-child {
  color: #f4c542;
  font-weight: 700;
}

.royal-content p {
  font-size: 14px;
  color: #cfcfcf;
}

/* BEST SELLER BADGE */

.badge {
  position: absolute;
  background: #c62828;
  color: white;

  padding: 6px 12px;
  font-size: 12px;

  border-radius: 20px;
  top: 12px;
  left: 12px;
}
/* ===== ROYAL PIZZA SECTION ===== */

.royal-pizza-section {
  padding: 80px 20px;
  position: relative;
}

/* HEADER */

.royal-header {
  text-align: center;
  margin-bottom: 40px;
}

.royal-header h2 {
  font-size: 40px;
  font-weight: 700;
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* golden lines */

.royal-header h2::before,
.royal-header h2::after {
  content: "";
  flex: 1;
  height: 3px;
  max-width: 120px;

  background: linear-gradient(90deg, #f4c542, #ffd86b);
}

.royal-header p {
  margin-top: 10px;
  color: #cfcfcf;
  font-size: 16px;
}

/* GRID */

.royal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
}

/* CARD */

.royal-card {
  background: #1f1f1f;
  border-radius: 14px;
  overflow: hidden;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);

  transition: transform 0.3s ease;
}

.royal-card:hover {
  transform: translateY(-6px);
}

/* IMAGE */

.royal-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* CONTENT */

.royal-content {
  padding: 18px;
}

.royal-title {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  color: white;
  margin-bottom: 6px;
}

.royal-title span:last-child {
  color: #f4c542;
  font-weight: 700;
}

.royal-content p {
  font-size: 14px;
  color: #cfcfcf;
}

/* BEST SELLER BADGE */

.badge {
  position: absolute;
  background: #c62828;
  color: white;

  padding: 6px 12px;
  font-size: 12px;

  border-radius: 20px;
  top: 12px;
  left: 12px;
}
/* Royal pizza image adjustment */

.royal-card img {
  width: 100%;
  height: 260px; /* vertical thoda lamba */
  object-fit: cover;

  /* horizontal thoda crop */
  object-position: center 30%;
}
/* ===== ROYAL PIZZA MOBILE IMAGE FIX ===== */

@media (max-width: 768px) {
  .royal-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .royal-card img {
    width: 100%;
    height: 220px; /* vertical thoda lamba */
    object-fit: cover;

    /* horizontal thoda crop */
    object-position: center 35%;
  }
}
/* parent ko reference banao */
.royal-card {
  position: relative;
}

/* badge correct place par */
.royal-card .badge {
  position: absolute;
  top: 12px;
  left: 12px;

  background: #d32f2f;
  color: white;

  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;

  border-radius: 20px;
  z-index: 5;
}
/* ===== PIZZA BY THE SLICE ===== */

.slice-section {
  padding: 60px 20px;
}

/* heading center */

.slice-section .section-header {
  text-align: center;
  margin-bottom: 35px;
}

.slice-section .section-header h2 {
  font-size: 38px;
  color: white;
  font-weight: 700;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* golden lines */

.slice-section .section-header h2::before,
.slice-section .section-header h2::after {
  content: "";
  flex: 1;
  max-width: 120px;
  height: 3px;

  background: linear-gradient(90deg, #f4c542, #ffd86b);
}

/* list */

.slice-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 700px;
  margin: auto;
}

/* item card */

.slice-item {
  display: flex;
  justify-content: space-between;
  align-items: center;

  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);

  padding: 16px 18px;
  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* text */

.slice-item span:first-child {
  font-size: 16px;
  color: white;
  font-weight: 600;
}

/* price */

.slice-item .price {
  font-size: 18px;
  font-weight: 700;
  color: #f4c542;
}
@media (max-width: 768px) {
  .slice-section {
    padding: 40px 18px;
  }

  .slice-section .section-header h2 {
    font-size: 30px;
  }

  .slice-item {
    padding: 14px 16px;
  }

  .slice-item span:first-child {
    font-size: 15px;
  }

  .slice-item .price {
    font-size: 16px;
  }
}
/* ===== SLICE PRICE SAME AS PICKUP ===== */

.slice-item .price {
  background: #c62828;
  color: white;

  padding: 8px 18px;
  border-radius: 30px;

  font-weight: 700;
  font-size: 15px;

  display: inline-block;
  min-width: 70px;
  text-align: center;
}
@media (max-width: 768px) {
  .slice-item {
    padding: 14px 16px;
  }

  .slice-item span:first-child {
    font-size: 15px;
  }

  .slice-item .price {
    padding: 6px 14px;
    font-size: 14px;
  }
}
/* ===== ROYAL SPECIALTIES ===== */

.royal-specialties {
  padding: 70px 20px;
}

/* heading */

.royal-specialties .section-title {
  text-align: center;
  margin-bottom: 45px;
}

.royal-specialties h2 {
  font-size: 36px;
  color: white;
  font-weight: 700;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* golden lines */

.royal-specialties h2::before,
.royal-specialties h2::after {
  content: "";
  flex: 1;
  max-width: 120px;
  height: 3px;
  background: linear-gradient(90deg, #f4c542, #ffd86b);
}

/* GRID */

.specialties-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 1100px;
  margin: auto;
}

/* CARD */

.specialty-card {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 12px;

  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* IMAGE CARD (House fav style) */

.specialty-card.with-image {
  padding: 0;
  overflow: hidden;
}

.image-wrapper {
  position: relative;
}

.image-wrapper img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* badge */

.badge {
  position: absolute;
  top: 12px;
  left: 12px;

  background: #c62828;
  color: white;

  padding: 6px 12px;
  font-size: 12px;
  border-radius: 20px;
}

/* CONTENT */

.card-content {
  padding: 18px;
}

/* title + price */

.title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 6px;
}

.title-price h3 {
  color: white;
  font-size: 18px;
}

.title-price span {
  background: #c62828;
  color: white;

  padding: 6px 14px;
  border-radius: 30px;

  font-size: 14px;
  font-weight: 600;
}

/* description */

.card-content p {
  font-size: 14px;
  color: #cfcfcf;
  line-height: 1.4;
}
.section-title h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.section-title h2::before,
.section-title h2::after {
  content: "";
  flex: 1;
  height: 3px;
  max-width: 120px;
  background: linear-gradient(90deg, #f4c542, #ffd86b);
}
/* REMOVE EXPLORE TEXT ABOVE HEADING */
.section-title h2::before,
.royal-specialties h2::before {
  content: none !important;
  display: none !important;
}
/* Remove golden divider lines from all section headings */

.section-header h2::before,
.section-header h2::after,
.section-title h2::before,
.section-title h2::after,
.royal-header h2::before,
.royal-header h2::after {
  content: none !important;
  display: none !important;
}
/* Purani heading wapis lane ke liye */
h1,
h2,
h3 {
  display: block !important;
}

/* EXPLORE ko specifically hatane ke liye (Pseudo-element check) */
*:before,
*:after {
  content: none !important;
}

/* Agar woh image ke andar likha hai toh ye try karo */
.explore-container,
.explore-section,
section[id*="explore"] {
  display: none !important;
}
/* ===== GOURMET PIZZA (SAME AS SPECIALTIES) ===== */

.gourmet-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 40px;
}

/* card */
.gourmet-card {
  background: #1e1e1e;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease;
}

.gourmet-card:hover {
  transform: translateY(-5px);
}

/* image */
.gourmet-card.with-image img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
}

/* content */
.gourmet-card .card-content {
  padding: 20px;
}

/* title + price */
.gourmet-card .title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.gourmet-card h3 {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}

/* price badge */
.gourmet-card span {
  background: #c23b32;
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}

/* description */
.gourmet-card p {
  color: #bdbdbd;
  font-size: 14px;
  line-height: 1.5;
}

/* ===== MOBILE ===== */

@media (max-width: 768px) {
  .gourmet-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .gourmet-card.with-image img {
    height: 210px;
  }

  .gourmet-card h3 {
    font-size: 18px;
  }
}
/* ===== GOURMET TEXT CARDS SAME AS PICKUP ===== */

.gourmet-card:not(.with-image) {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* title + price alignment */
.gourmet-card:not(.with-image) .title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

/* price pill */
.gourmet-card:not(.with-image) span {
  background: #c23b32;
  color: #fff;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}

/* text */
.gourmet-card:not(.with-image) h3 {
  color: #fff;
  font-size: 18px;
}

.gourmet-card:not(.with-image) p {
  color: #cfcfcf;
  font-size: 14px;
}
/* ===== GOURMET PIZZA MOBILE ===== */

@media (max-width: 768px) {
  /* grid -> 1 card per row */
  .gourmet-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 12px;
  }

  /* image cards */
  .gourmet-card.with-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
  }

  /* transparent text cards */
  .gourmet-card:not(.with-image) {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    border-radius: 12px;
    padding: 16px;
  }

  /* title + price */
  .gourmet-card .title-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
  }

  .gourmet-card h3 {
    font-size: 17px;
  }

  .gourmet-card span {
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 18px;
  }

  /* description */
  .gourmet-card p {
    font-size: 13px;
    line-height: 1.5;
  }
}
/* ===== FIX MOBILE CARDS LIKE PICKUP ===== */

@media (max-width: 768px) {
  /* specialties + gourmet -> 1 column */
  .specialties-grid,
  .gourmet-grid {
    grid-template-columns: 1fr !important;
    gap: 18px;
    padding: 0 12px;
  }

  /* card width full */
  .specialty-card,
  .gourmet-card {
    width: 100%;
  }

  /* image cards */
  .specialty-card.with-image img,
  .gourmet-card.with-image img {
    width: 100%;
    height: 210px;
    object-fit: cover;
  }

  /* text cards pickup style */
  .specialty-card:not(.with-image),
  .gourmet-card:not(.with-image) {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 14px;
    padding: 18px;
  }

  /* title + price */
  .title-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
/* ===== MOBILE HEADING FIX ===== */

@media (max-width: 768px) {
  .section-title h2,
  .section-header h2,
  .royal-header h2 {
    font-size: 28px;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 20px;
    padding: 0 10px;
    word-break: break-word;
  }

  /* thoda spacing fix */
  .section-title,
  .section-header,
  .royal-header {
    margin-bottom: 25px;
  }
}
/* ===== MOBILE HEADING FIX ===== */

@media (max-width: 768px) {
  .section-title h2,
  .section-header h2,
  .royal-header h2 {
    font-size: 28px;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 20px;
    padding: 0 10px;
    word-break: break-word;
  }

  /* thoda spacing fix */
  .section-title,
  .section-header,
  .royal-header {
    margin-bottom: 25px;
  }
}
/* ===== FIX LONG HEADINGS ON MOBILE ===== */

@media (max-width: 768px) {
  .section-title h2 {
    font-size: 26px;
    text-align: center;
    line-height: 1.3;
    white-space: normal; /* line break allow karega */
    word-break: break-word;
    padding: 0 12px;
  }
}
/* ===== WINGS SECTION SAME AS GOURMET / SPECIALTIES ===== */

.wings-section {
  margin-top: 40px;
}

.wings-section .royal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

/* card style */
.wings-section .royal-card {
  background: rgba(0, 0, 0, 0.75);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* image */
.wings-section .royal-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* content */
.wings-section .royal-content {
  padding: 18px;
}

/* title + price */
.wings-section .royal-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

.wings-section .royal-title span:last-child {
  background: #b31217;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
}

/* description */
.wings-section .royal-content p {
  font-size: 14px;
  opacity: 0.8;
}

/* best seller badge */
.wings-section .badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #c62828;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

/* ===== MOBILE ===== */

@media (max-width: 768px) {
  .wings-section .royal-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .wings-section .royal-card img {
    height: 210px;
  }
}
/* remove background from wings section only */
.wings-section {
  background: none !important;
}
/* ===== CALZONE & STROMBOLI SECTION ===== */

.calzone-section {
  margin-top: 60px;
}

/* heading same as other sections */
.calzone-section .section-title h2 {
  font-size: 42px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
}

.calzone-section .section-title p {
  text-align: center;
  font-size: 16px;
  opacity: 0.8;
  max-width: 750px;
  margin: auto;
  margin-bottom: 40px;
  line-height: 1.6;
}

/* grid layout */
.calzone-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

/* cards same style as pickup */
.calzone-card {
  background: rgba(0, 0, 0, 0.75);
  border-radius: 14px;
  padding: 18px 22px;
}

/* title + price */
.calzone-card .title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.calzone-card h3 {
  font-size: 18px;
  font-weight: 600;
}

.calzone-card span {
  background: #b31217;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
}

/* description */
.calzone-card p {
  font-size: 14px;
  opacity: 0.8;
}

/* ===== MOBILE ===== */

@media (max-width: 768px) {
  .calzone-section .section-title h2 {
    font-size: 28px;
  }

  .calzone-grid {
    grid-template-columns: 1fr;
  }

  .calzone-card {
    padding: 16px;
  }
}
/* ===== CALZONE & STROMBOLI SECTION ===== */

.calzone-section {
  margin-top: 60px;
}

/* heading same as other sections */
.calzone-section .section-title h2 {
  font-size: 42px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
}

.calzone-section .section-title p {
  text-align: center;
  font-size: 16px;
  opacity: 0.8;
  max-width: 750px;
  margin: auto;
  margin-bottom: 40px;
  line-height: 1.6;
}

/* grid layout */
.calzone-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

/* cards same style as pickup */
.calzone-card {
  background: rgba(0, 0, 0, 0.75);
  border-radius: 14px;
  padding: 18px 22px;
}

/* title + price */
.calzone-card .title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.calzone-card h3 {
  font-size: 18px;
  font-weight: 600;
}

.calzone-card span {
  background: #b31217;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
}

/* description */
.calzone-card p {
  font-size: 14px;
  opacity: 0.8;
}

/* ===== MOBILE ===== */

@media (max-width: 768px) {
  .calzone-section .section-title h2 {
    font-size: 28px;
  }

  .calzone-grid {
    grid-template-columns: 1fr;
  }

  .calzone-card {
    padding: 16px;
  }
}
/* ===== FIX WINGS HEADING ALIGNMENT ===== */

.wings-section .section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px auto;
}

.wings-section .section-header h2 {
  font-size: 36px;
  margin-bottom: 8px;
}

.wings-section .section-header p {
  font-size: 15px;
  opacity: 0.8;
  line-height: 1.6;
  max-width: 650px;
  margin: auto;
}

/* mobile fix */

@media (max-width: 768px) {
  .wings-section .section-header h2 {
    font-size: 26px;
  }

  .wings-section .section-header p {
    font-size: 14px;
    padding: 0 12px;
  }
}
/* Wings Heading aur Description ko Specials jaisa banane ke liye */

#wings-section {
  /* Agar aapne section ko koi id di hai, nahi toh sirf .wings-container use karein */
  text-align: center !important;
  padding: 20px 0;
}

.wings-title,
h2.wings-heading {
  /* Jo bhi aapki 'Wings' ki class hai */
  font-size: 48px !important; /* Specials heading jaisa bada size */
  font-weight: bold;
  color: white;
  margin-bottom: 10px;
  text-align: center;
}

.wings-description {
  /* 'All wings & chicken tenders...' waali line */
  font-size: 18px !important; /* Specials subtitle jaisa size */
  color: #f0f0f0;
  text-align: center;
  max-width: 80%; /* Taaki text beech mein rahe aur zyada phail na jaye */
  margin: 0 auto;
}
/* FIX WINGS HEADER ALIGNMENT */

.section-header {
  width: 100%;
  text-align: center;
  margin-top: 60px;
  margin-bottom: 40px;
}

.section-header h2 {
  font-size: 36px;
  margin-bottom: 10px;
}

.section-header p {
  font-size: 15px;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
  opacity: 0.9;
}

/* MOBILE FIX */

@media (max-width: 768px) {
  .section-header h2 {
    font-size: 26px;
  }

  .section-header p {
    font-size: 14px;
    padding: 0 15px;
  }
}
/* ===== CALZONE / STROMBOLI HEADER SAME AS WINGS ===== */

.calzone-section .section-title {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 50px auto;
}

.calzone-section .section-title h2 {
  font-size: 36px;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.calzone-section .section-title p {
  font-size: 15px;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
  opacity: 0.9;
}

/* MOBILE FIX */

@media (max-width: 768px) {
  .calzone-section .section-title h2 {
    font-size: 26px;
    padding: 0 10px;
  }

  .calzone-section .section-title p {
    font-size: 14px;
    padding: 0 15px;
    line-height: 1.5;
  }
}
/* ===== CALZONE / STROMBOLI HEADER FIX ===== */

.calzone-section .section-title {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 50px auto;
  padding: 0 20px;
}

.calzone-section .section-title h2 {
  font-size: 34px;
  margin-bottom: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

.calzone-section .section-title p {
  font-size: 15px;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
  opacity: 0.9;
}

/* MOBILE */

@media (max-width: 768px) {
  .calzone-section .section-title h2 {
    font-size: 26px;
  }

  .calzone-section .section-title p {
    font-size: 14px;
    line-height: 1.5;
  }
}
/* Calzones & Strombolis Heading/Description Fix */

.calzone-section .section-title {
  text-align: center !important;
  margin-bottom: 30px; /* Cards aur heading ke beech ka gap */
  padding: 0 20px;
}

.calzone-section .section-title h2 {
  font-size: 45px !important; /* Specials jaisa bada size */
  text-transform: uppercase;
  color: white;
  margin-bottom: 15px;
  font-weight: bold;
}

.calzone-section .section-title p {
  font-size: 18px !important; /* Readable description size */
  color: #e0e0e0;
  max-width: 800px; /* Text ko bohot zyada wide hone se rokega */
  margin: 0 auto; /* Center karne ke liye */
  line-height: 1.5; /* Spacing between lines */
}
/* ===== FORCE FIX: CALZONES & STROMBOLIS HEADER ===== */

.calzone-section .section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  margin: 80px auto 40px auto;
}

.calzone-section .section-title h2 {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.calzone-section .section-title p {
  max-width: 700px;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 auto;
}

/* MOBILE */

@media (max-width: 768px) {
  .calzone-section .section-title h2 {
    font-size: 26px;
  }

  .calzone-section .section-title p {
    font-size: 14px;
    padding: 0 16px;
  }
}
/* ===== CALZONES & STROMBOLIS MOBILE ===== */

@media (max-width: 768px) {
  .calzone-section {
    padding: 40px 18px;
  }

  /* heading */

  .calzone-section .section-header h2 {
    font-size: 26px;
    line-height: 1.3;
  }

  .calzone-section .section-header p {
    font-size: 14px;
    padding: 0 10px;
    line-height: 1.5;
  }

  /* grid -> 1 card per row */

  .calzone-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* card */

  .calzone-card {
    padding: 16px;
  }

  /* title + price */

  .calzone-card .title-price h3 {
    font-size: 17px;
  }

  .calzone-card span {
    font-size: 13px;
    padding: 5px 12px;
  }

  /* description */

  .calzone-card p {
    font-size: 13px;
  }
}
/* ===== CHEESESTEAK / SALAD / PASTA SAME AS SPECIALTIES ===== */

/* GRID */

.cheesesteak-grid,
.salad-grid,
.pasta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 1100px;
  margin: auto;
}

/* CARD */

.cheesesteak-card,
.salad-card,
.pasta-card {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 14px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* IMAGE CARD */

.cheesesteak-card.with-image {
  padding: 0;
  overflow: hidden;
}

.cheesesteak-card.with-image img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
}

.cheesesteak-card.with-image .card-content {
  padding: 18px;
}

/* TITLE + PRICE */

.title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.title-price h3 {
  font-size: 18px;
  color: white;
}

.title-price span {
  background: #c62828;
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}

/* DESCRIPTION */

.cheesesteak-card p,
.salad-card p,
.pasta-card p {
  font-size: 14px;
  color: #cfcfcf;
  line-height: 1.5;
}

/* ===== MOBILE ===== */

@media (max-width: 768px) {
  .cheesesteak-grid,
  .salad-grid,
  .pasta-grid {
    grid-template-columns: 1fr;
  }

  .cheesesteak-card.with-image img {
    height: 200px;
  }

  .title-price h3 {
    font-size: 17px;
  }

  .title-price span {
    font-size: 12px;
    padding: 5px 12px;
  }
}
/* ===== CHEESESTEAK SECTION HEADING FIX ===== */

.cheesesteak-section .section-title {
  text-align: center;
  max-width: 800px;
  margin: 70px auto 40px auto;
  padding: 0 20px;
}

/* heading */

.cheesesteak-section .section-title h2 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

/* description */

.cheesesteak-section .section-title p {
  font-size: 16px;
  line-height: 1.6;
  max-width: 650px;
  margin: auto;
  color: #d0d0d0;
}

/* ===== MOBILE ===== */

@media (max-width: 768px) {
  .cheesesteak-section .section-title h2 {
    font-size: 26px;
  }

  .cheesesteak-section .section-title p {
    font-size: 14px;
    padding: 0 12px;
  }
}
/* ===== CHEESESTEAK SECTION FIX ===== */

.cheesesteak-section {
  padding-top: 70px;
}

/* heading block */

.cheesesteak-section .section-title {
  text-align: center;
  max-width: 750px;
  margin: 0 auto 40px auto;
  padding: 0 20px;
}

/* heading */

.cheesesteak-section .section-title h2 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 1px;
}

/* description */

.cheesesteak-section .section-title p {
  font-size: 16px;
  line-height: 1.6;
  color: #cfcfcf;
  max-width: 650px;
  margin: auto;
}

/* cards spacing */

.cheesesteak-grid {
  margin-top: 40px;
}

/* ===== MOBILE ===== */

@media (max-width: 768px) {
  .cheesesteak-section .section-title h2 {
    font-size: 26px;
  }

  .cheesesteak-section .section-title p {
    font-size: 14px;
    padding: 0 10px;
  }
}
/* ===== FIX CHEESESTEAK HEADING ===== */

.cheesesteak-section .section-title {
  text-align: center !important;
  max-width: 800px;
  margin: 70px auto 40px auto;
  padding: 0 20px;
}

/* heading */

.cheesesteak-section .section-title h2 {
  font-size: 38px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
  text-align: center !important;
}

/* description */

.cheesesteak-section .section-title p {
  font-size: 16px;
  color: #cfcfcf;
  line-height: 1.6;
  max-width: 650px;
  margin: 0 auto;
  text-align: center;
}

/* space before cards */

.cheesesteak-grid {
  margin-top: 40px;
}

/* ===== MOBILE ===== */

@media (max-width: 768px) {
  .cheesesteak-section .section-title h2 {
    font-size: 26px;
  }

  .cheesesteak-section .section-title p {
    font-size: 14px;
    padding: 0 10px;
  }
}
/* ===== CHEESESTEAK HEADER (SAME AS STROMBOLI) ===== */

.cheesesteak-section .section-header {
  text-align: center;
  max-width: 800px;
  margin: 80px auto 40px auto;
  padding: 0 20px;
}

.cheesesteak-section .section-header h2 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 10px;
}

.cheesesteak-section .section-header p {
  font-size: 15px;
  opacity: 0.85;
  line-height: 1.6;
  max-width: 650px;
  margin: auto;
}

/* mobile */

@media (max-width: 768px) {
  .cheesesteak-section .section-header h2 {
    font-size: 26px;
  }

  .cheesesteak-section .section-header p {
    font-size: 14px;
    padding: 0 12px;
  }
}
/* SALAD HEADER FIX */

.salad-section .section-header {
  text-align: center;
  max-width: 800px;
  margin: 70px auto 40px auto;
  padding: 0 20px;
}

.salad-section .section-header h2 {
  font-size: 36px;
  margin-bottom: 10px;
}

.salad-section .section-header p {
  font-size: 15px;
  line-height: 1.6;
  max-width: 650px;
  margin: auto;
  opacity: 0.9;
}
/* ===== SALAD GRID CENTER FIX ===== */

.salad-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;

  max-width: 900px;
  margin: 40px auto 0 auto; /* center karega */
  padding: 0 20px;
}

/* CARD */

.salad-card {
  background: rgba(0, 0, 0, 0.75);
  border-radius: 14px;
  padding: 18px 20px;
}

/* title + price */

.salad-card .title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

/* ===== MOBILE ===== */

@media (max-width: 768px) {
  .salad-grid {
    grid-template-columns: 1fr; /* 1 card per row */
    max-width: 500px;
  }

  .salad-card {
    padding: 16px;
  }
}
/* ===== SALAD GRID CENTER FIX ===== */

.salad-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;

  max-width: 900px;
  margin: 40px auto 0 auto; /* center karega */
  padding: 0 20px;
}

/* CARD */

.salad-card {
  background: rgba(0, 0, 0, 0.75);
  border-radius: 14px;
  padding: 18px 20px;
}

/* title + price */

.salad-card .title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

/* ===== MOBILE ===== */

@media (max-width: 768px) {
  .salad-grid {
    grid-template-columns: 1fr; /* 1 card per row */
    max-width: 500px;
  }

  .salad-card {
    padding: 16px;
  }
}
/* ===== SALAD CARDS SAME AS PASTA ===== */

.salad-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

.salad-card {
  background: rgba(0, 0, 0, 0.75);
  border-radius: 14px;
  padding: 20px;
}

/* title + price */

.salad-card .title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

/* price pill */

.salad-card span {
  background: #c62828;
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}
/* ===== ROYAL SANDWICHES ===== */

.sandwich-section {
  margin-top: 80px;
}

.sandwich-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 20px;
}

/* card */

.sandwich-card {
  background: rgba(0, 0, 0, 0.75);
  border-radius: 14px;
  padding: 20px;
  transition: 0.3s;
}

.sandwich-card:hover {
  transform: translateY(-4px);
}

/* title + price */

.sandwich-card .title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

/* title */

.sandwich-card h3 {
  font-size: 18px;
  font-weight: 600;
}

/* description */

.sandwich-card p {
  font-size: 14px;
  opacity: 0.9;
  line-height: 1.5;
}

/* price pill */

.sandwich-card span {
  background: #c62828;
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}

/* ===== MOBILE ===== */

@media (max-width: 768px) {
  .sandwich-grid {
    grid-template-columns: 1fr;
  }

  .sandwich-card {
    padding: 18px;
  }

  .sandwich-card h3 {
    font-size: 17px;
  }
}
/* ===== GREEK SPECIALTIES ===== */

.greek-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

.greek-card {
  background: rgba(0, 0, 0, 0.75);
  border-radius: 14px;
  padding: 20px;
}

/* ===== WRAPS ===== */

.wrap-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

.wrap-card {
  background: rgba(0, 0, 0, 0.75);
  border-radius: 14px;
  padding: 20px;
}

/* title price */

.title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

/* price pill */

.title-price span {
  background: #c62828;
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}
/* Quesadilla Cards */

.menu-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.menu-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1c1c1c;
  padding: 18px 22px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: 0.3s;
}

.menu-card:hover {
  transform: translateY(-3px);
}

.menu-info h3 {
  color: #fff;
  font-size: 17px;
  font-weight: 500;
}

.menu-price {
  background: #e63946;
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}
/* Quesadilla cards fix */

.menu-container {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.menu-card {
  display: flex;
  justify-content: space-between;
  align-items: center;

  background: rgba(0, 0, 0, 0.65); /* transparent dark card */
  backdrop-filter: blur(4px);

  padding: 16px 22px;
  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.35);
}

.menu-card h3 {
  color: #ffffff;
  font-size: 17px;
  font-weight: 500;
  margin: 0;
}

.menu-price {
  background: #e63946;
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}
.menu-container {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.menu-card {
  display: flex;
  justify-content: space-between;
  align-items: center;

  background: #1a1a1a; /* solid dark card */
  padding: 16px 22px;

  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.menu-card h3 {
  color: #ffffff;
  font-size: 17px;
  margin: 0;
}

.menu-price {
  background: #e63946;
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}
.menu-card {
  display: flex;
  justify-content: space-between;
  align-items: center;

  background: rgba(0, 0, 0, 0.55); /* transparent but dark */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  padding: 16px 22px;
  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

.menu-card h3 {
  color: #fff;
  margin: 0;
}

.menu-price {
  background: #e63946;
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 600;
}
/* Fix Quesadillas heading case */
.section-title h2 {
  text-transform: none !important;
}
/* Fix Quesadilla description caps */
.section-title p {
  text-transform: none !important;
  letter-spacing: normal !important;
}
.section-title {
  text-align: center;
  margin-bottom: 40px;
}
/* Description font size fix */
.section-title p {
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: 0.5px;
  color: #ddd;
}
/* ===== MOBILE MENU FIX ===== */

@media (max-width: 768px) {
  .menu-container {
    width: 100%;
    padding: 0 12px;
  }

  .menu-card {
    padding: 14px 16px;
    border-radius: 10px;
  }

  .menu-card h3 {
    font-size: 15px;
  }

  .menu-price {
    font-size: 13px;
    padding: 5px 12px;
  }

  .section-title h2 {
    font-size: 28px;
  }

  .section-title p {
    font-size: 13px;
    line-height: 1.5;
    padding: 0 10px;
  }
}
/* ===== MOBILE MENU CARDS ===== */

@media (max-width: 768px) {
  .menu-container {
    width: 100%;
    padding: 0 14px;
    gap: 16px;
  }

  .menu-card {
    padding: 14px 16px;
    border-radius: 10px;
  }

  .menu-info h3 {
    font-size: 15px;
  }

  .menu-info p {
    font-size: 13px;
    line-height: 1.5;
    margin-top: 4px;
  }

  .menu-price {
    font-size: 13px;
    padding: 5px 12px;
  }
}
/* ===== IMAGE MENU CARDS ===== */

.image-card {
  background: rgba(0, 0, 0, 0.65);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.image-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.menu-content {
  padding: 18px;
}

.menu-content h3 {
  color: #fff;
  font-size: 18px;
  margin: 0;
}

.menu-content p {
  font-size: 14px;
  color: #ddd;
  margin-top: 6px;
  line-height: 1.5;
}

.title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-price span {
  background: #e63946;
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}
@media (max-width: 768px) {
  .image-card img {
    height: 150px;
  }

  .menu-content h3 {
    font-size: 16px;
  }

  .menu-content p {
    font-size: 13px;
  }
}
/* IMAGE CARDS */

.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.image-card {
  background: rgba(0, 0, 0, 0.65);
  border-radius: 14px;
  overflow: hidden;
}

.image-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.menu-content {
  padding: 18px;
  color: white;
}

.menu-content h3 {
  margin: 0;
  font-size: 18px;
}

.menu-content p {
  font-size: 14px;
  margin: 6px 0 10px;
  color: #ddd;
}

.menu-price {
  background: #e63946;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  color: white;
  display: inline-block;
}
/* horizontal menu cards */

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.horizontal-card {
  display: flex;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 14px;
  overflow: hidden;
  align-items: center;
}

.horizontal-card img {
  width: 150px;
  height: 120px;
  object-fit: cover;
}

.menu-content {
  padding: 16px;
  flex: 1;
  color: white;
}

.title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-price,
.title-price span {
  background: #e63946;
  padding: 6px 14px;
  border-radius: 20px;
  color: white;
  font-size: 14px;
}
/* SIDE ORDER IMAGE CARDS FIX */

.image-card {
  background: rgba(0, 0, 0, 0.65);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.image-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.menu-content {
  padding: 18px;
  text-align: left;
}

.menu-content h3 {
  margin-bottom: 6px;
}

.menu-content p {
  font-size: 14px;
  color: #ddd;
  line-height: 1.5;
}

.menu-price {
  display: inline-block;
  margin-top: 10px;
  background: #e63946;
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
}
/* ROYAL SIDE ORDER IMAGE CARDS */

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.image-card {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.image-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.menu-content {
  padding: 20px;
  text-align: left;
}

.menu-content h3 {
  font-size: 20px;
  margin-bottom: 6px;
}

.menu-content p {
  font-size: 14px;
  color: #ccc;
  line-height: 1.5;
  margin-bottom: 12px;
}

.menu-price {
  display: inline-block;
  background: #e63946;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  color: #fff;
}
/* ROYAL SIDE ORDER IMAGE CARDS */

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.image-card {
  background: #111;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}

.image-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.menu-content {
  padding: 20px;
}

.menu-content h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.menu-content p {
  font-size: 14px;
  color: #ccc;
  line-height: 1.5;
  margin-bottom: 12px;
}

.menu-price {
  display: inline-block;
  background: #e63946;
  color: white;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  margin-top: 5px;
}
.menu-content {
  position: relative;
  padding: 20px;
  padding-right: 90px;
}

.menu-price {
  position: absolute;
  right: 20px;
  bottom: 20px;

  background: #e63946;
  color: #fff;

  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}
/* ===== ROYAL SIDE ORDERS FINAL FIX ===== */

#royal-side-orders .menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 35px;
}

#royal-side-orders .image-card {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}

#royal-side-orders .image-card img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
}

#royal-side-orders .menu-content {
  padding: 18px;
  padding-bottom: 45px;
}

#royal-side-orders .menu-content h3 {
  font-size: 20px;
  margin-bottom: 6px;
}

#royal-side-orders .menu-content p {
  font-size: 14px;
  color: #ccc;
  line-height: 1.5;
}

#royal-side-orders .menu-price {
  position: absolute;
  right: 18px;
  bottom: 18px;
  background: #e63946;
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}

/* MOBILE */

@media (max-width: 768px) {
  #royal-side-orders .menu-grid {
    grid-template-columns: 1fr;
  }

  #royal-side-orders .image-card img {
    height: 180px;
  }
}
/* ===== MENU CARD PRICE ALIGN FIX ===== */

.menu-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.menu-card .menu-info {
  flex: 1;
}

.menu-card .menu-price {
  position: static; /* remove absolute positioning if any */
  margin-left: 10px;
  background: #e63946;
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
/* ===== MENU PRICE ALIGN FINAL FIX ===== */

.menu-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.menu-card .menu-info {
  flex: 1;
}

.menu-card h3 {
  margin-bottom: 4px;
}

.menu-card p {
  margin: 0;
  font-size: 14px;
  color: #ccc;
}

/* price badge */

.menu-card .menu-price {
  margin-left: auto;
  background: #e63946;
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
/* SECTION */

.menu-section {
  padding: 80px 8%;
}

.section-title {
  text-align: center;
  margin-bottom: 40px;
}

.section-title h2 {
  font-size: 38px;
  color: #fff;
}

.section-title p {
  color: #bbb;
  margin-top: 8px;
}

/* GRID */

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

/* IMAGE CARDS */

.image-card {
  overflow: hidden;
  border-radius: 16px;
}

.image-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* CONTENT */

.menu-content {
  background: #1f1f1f;
  padding: 18px;
  border-radius: 14px;
  margin-top: -20px;
  position: relative;
  color: #fff;
}

.title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.price {
  background: #e74c3c;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: bold;
}

/* TEXT CARDS */

.menu-card {
  background: #1f1f1f;
  border-radius: 14px;
  padding: 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.menu-info h3 {
  color: #fff;
  margin-bottom: 6px;
  font-size: 18px;
}

.menu-info p {
  color: #bbb;
  font-size: 14px;
  line-height: 1.4;
}

.menu-price {
  background: #e74c3c;
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: bold;
  white-space: nowrap;
}

/* MOBILE */

@media (max-width: 768px) {
  .menu-grid {
    grid-template-columns: 1fr;
  }
}
/* ===== ROYAL SIDE ORDERS FINAL FIX ===== */

/* make cards glass / transparent */
#royal-side-orders .menu-card,
#royal-side-orders .menu-content {
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  position: relative;
}

/* fix price badges */
#royal-side-orders .menu-price,
#royal-side-orders .price {
  position: absolute;
  right: 15px;
  bottom: 15px;
  background: #e74c3c;
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}

/* spacing so text doesn't collide with badge */
#royal-side-orders .menu-info {
  padding-right: 90px;
}
/* ===== FIX IMAGE CARD PRICE BADGE ===== */

#royal-side-orders .image-card .title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#royal-side-orders .image-card .price {
  position: static !important;
  background: #e74c3c;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* keep text cards price right */
#royal-side-orders .menu-card:not(.image-card) {
  position: relative;
}

#royal-side-orders .menu-card:not(.image-card) .menu-price {
  position: absolute;
  right: 15px;
  bottom: 15px;
}
/* ===== REMOVE EXTRA BLACK BOX FROM IMAGE CARDS ===== */

#royal-side-orders .image-card .menu-content {
  background: transparent !important;
  margin-top: 0 !important;
  padding: 16px !important;
  border-radius: 0 !important;
}

/* keep everything inside one card */
#royal-side-orders .image-card {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
  overflow: hidden;
}

/* image shape */
#royal-side-orders .image-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* price badge */
#royal-side-orders .image-card .price {
  background: #e74c3c;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}
/* ===== MERGE IMAGE + TEXT INTO ONE CARD ===== */

#royal-side-orders .image-card {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
  overflow: hidden;
  padding-bottom: 15px;
}

/* remove separate black box */
#royal-side-orders .image-card .menu-content {
  background: transparent !important;
  margin-top: 0 !important;
  padding: 15px 18px;
  border-radius: 0;
}

/* image */
#royal-side-orders .image-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
}

/* title + price row */
#royal-side-orders .image-card .title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

/* price badge */
#royal-side-orders .image-card .price {
  background: #e74c3c;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}
/* ===== REMOVE BLACK CARD ONLY FROM IMAGE ITEMS ===== */

#royal-side-orders .image-card .menu-content {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  margin-top: -5px !important;
  padding: 15px 18px !important;
}

/* keep whole card look same */
#royal-side-orders .image-card {
  background: rgba(0, 0, 0, 0.55);
  border-radius: 16px;
  overflow: hidden;
}

/* image styling */
#royal-side-orders .image-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
}
/* ===== EXCEPTION FOR IMAGE CARDS ===== */

/* remove text-card background from image cards */
#royal-side-orders .image-card .menu-content {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin-top: 0 !important;
}

/* keep image card clean */
#royal-side-orders .image-card {
  background: rgba(0, 0, 0, 0.55);
  border-radius: 16px;
  overflow: hidden;
}

/* text cards remain same */
#royal-side-orders .menu-card:not(.image-card) {
  background: rgba(20, 20, 20, 0.75);
  border-radius: 16px;
}
/* ===== FORCE FIX: IMAGE CARDS SHOULD NOT HAVE TEXT-CARD BOX ===== */

/* stop text-card styling from affecting image cards */
#royal-side-orders .menu-card.image-card .menu-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  padding: 15px 18px !important;
}

/* keep image card single container */
#royal-side-orders .menu-card.image-card {
  background: rgba(0, 0, 0, 0.55) !important;
  border-radius: 16px;
  overflow: hidden;
}

/* ensure image shape */
#royal-side-orders .menu-card.image-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
}
/* TEXT MENU CARDS */

.menu-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 30px;
}

.menu-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  background: rgba(0, 0, 0, 0.45);
  padding: 18px 22px;
  border-radius: 14px;
}

.menu-info {
  max-width: 80%;
}

.menu-info h3 {
  margin-bottom: 4px;
  font-size: 18px;
}

.menu-info p {
  font-size: 14px;
  color: #ccc;
}

.menu-price {
  background: #e63946;
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
/* ===== MOBILE MENU FIX ===== */

@media (max-width: 768px) {
  .menu-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
  }

  .menu-info {
    max-width: 100%;
  }

  .menu-info h3 {
    font-size: 16px;
  }

  .menu-info p {
    font-size: 13px;
  }

  .menu-price {
    align-self: flex-end;
    margin-top: 4px;
    font-size: 13px;
    padding: 5px 14px;
  }
}
/* ===== DESSERT CARDS ===== */

#desserts .menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

#desserts .menu-card {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 18px;
  position: relative;
}

#desserts .image-card {
  padding: 0;
  overflow: hidden;
}

#desserts .image-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

#desserts .menu-content {
  padding: 16px 18px;
}

#desserts .title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

#desserts .menu-card h3 {
  color: white;
  font-size: 18px;
}

#desserts .menu-card p {
  color: #bdbdbd;
  font-size: 14px;
  line-height: 1.4;
}

#desserts .price {
  background: #e74c3c;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: white;
}

/* mobile */

@media (max-width: 768px) {
  #desserts .menu-grid {
    grid-template-columns: 1fr;
  }
}
/* ===== DESSERT IMAGE CARD FIX ===== */

.image-card {
  position: relative;
  overflow: hidden;
}

.image-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  border-radius: 14px 14px 0 0;
}

/* content area */

.image-card .menu-content {
  padding: 18px;
  position: relative;
}

/* price badge fix */

.image-card .menu-price {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: #e63946;
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}

/* mobile fix */

@media (max-width: 768px) {
  .image-card img {
    height: 180px;
  }

  .image-card .menu-price {
    bottom: 10px;
    font-size: 13px;
    padding: 5px 14px;
  }
}
/* ===== DESSERT SECTION STYLE (CHEESESTEAK STYLE) ===== */

#desserts .menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

/* CARD */

#desserts .menu-card {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

/* IMAGE */

#desserts .menu-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* CONTENT */

#desserts .menu-content {
  padding: 16px 18px;
}

/* TITLE + PRICE */

#desserts .title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

#desserts h3 {
  color: #fff;
  font-size: 18px;
}

#desserts p {
  color: #bdbdbd;
  font-size: 14px;
  line-height: 1.4;
}

/* PRICE BADGE */

#desserts .price {
  background: #e74c3c;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

/* MOBILE */

@media (max-width: 768px) {
  #desserts .menu-grid {
    grid-template-columns: 1fr;
  }

  #desserts .menu-card img {
    height: 180px;
  }
}
/* ===== DESSERT SECTION FINAL FIX ===== */

#desserts .menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  margin-top: 25px;
}

/* CARD STYLE */

#desserts .menu-card {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  padding: 18px;
}

/* IMAGE CARD */

#desserts .image-card {
  padding: 0;
}

#desserts .image-card img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
}

/* CONTENT AREA */

#desserts .menu-content {
  padding: 18px;
}

/* TITLE + PRICE ROW */

#desserts .title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

/* TITLE */

#desserts .menu-card h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

/* DESCRIPTION */

#desserts .menu-card p {
  color: #bdbdbd;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 4px;
}

/* PRICE BADGE */

#desserts .price {
  background: #e74c3c;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

/* MOBILE */

@media (max-width: 768px) {
  #desserts .menu-grid {
    grid-template-columns: 1fr;
  }

  #desserts .image-card img {
    height: 180px;
  }
}
.menu-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 30px;
}

.menu-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  background: rgba(0, 0, 0, 0.45);
  padding: 18px 22px;
  border-radius: 14px;
}

.menu-info {
  max-width: 80%;
}

.menu-info h3 {
  margin-bottom: 4px;
}

.menu-info p {
  font-size: 14px;
  color: #ccc;
}

.menu-price {
  background: #e63946;
  color: white;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
/* ===== MOBILE VERSION FOR TEXT MENU SECTIONS ===== */

@media (max-width: 768px) {
  .menu-container {
    gap: 14px;
  }

  .menu-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
  }

  .menu-info {
    max-width: 100%;
  }

  .menu-info h3 {
    font-size: 16px;
  }

  .menu-info p {
    font-size: 13px;
    line-height: 1.4;
  }

  .menu-price {
    align-self: flex-end;
    margin-top: 4px;
    font-size: 13px;
    padding: 5px 14px;
  }
}
/* ===== DESSERT SECTION ===== */

#desserts .menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  margin-bottom: 25px;
}

/* CARD */
#desserts .menu-card {
  background: #1e1e1e;
  border-radius: 14px;
  overflow: hidden;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/* IMAGE CARDS */
#desserts .image-card {
  padding: 0;
}

#desserts .image-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* TEXT AREA */
#desserts .menu-content {
  padding: 16px;
}

/* TITLE + PRICE */
#desserts .title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

/* TITLE */
#desserts h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

/* DESCRIPTION */
#desserts p {
  color: #cfcfcf;
  font-size: 14px;
  line-height: 1.5;
}

/* PRICE BADGE */
#desserts .price {
  background: #ff4d4d;
  color: white;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}
/* ===== DESSERT CARD FIX ===== */

#desserts .menu-card {
  background: rgba(0, 0, 0, 0.65); /* transparent dark */
  backdrop-filter: blur(4px);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* TITLE + PRICE ALIGNMENT */

#desserts .title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* PRICE BADGE RIGHT SIDE */

#desserts .price {
  background: #ff4d4d;
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin-left: auto;
}

/* TEXT COLOR */

#desserts h3 {
  color: white;
  font-size: 18px;
}

#desserts p {
  color: #d0d0d0;
  font-size: 14px;
}
#desserts .image-card {
  padding: 0;
  overflow: hidden;
}

#desserts .image-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
/* ===== PRICE BADGE FIX ===== */

#desserts .title-price {
  display: flex;
  align-items: center;
  width: 100%;
}

#desserts .title-price h3 {
  flex: 1;
}

#desserts .price {
  margin-left: auto;
  background: #ff4d4d;
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
/* ===== DESSERT PRICE BADGE FIX ===== */

#desserts .title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#desserts .price {
  background: #ff4d4d;
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;

  /* IMPORTANT RESET */
  display: inline-block;
  width: auto;
  min-width: auto;
  max-width: max-content;
  flex: none;
}
/* ===== DESSERT PRICE BADGE FIX ===== */

#desserts .title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#desserts .price {
  background: #ff4d4d;
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;

  /* IMPORTANT RESET */
  display: inline-block;
  width: auto;
  min-width: auto;
  max-width: max-content;
  flex: none;
}
/* FIX TITLE + PRICE ROW */

#desserts .title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 6px;
}

/* PRICE BADGE */

#desserts .price {
  background: #ff4d4d;
  color: white;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
/* ===== DESSERT PRICE BADGE (LIKE FRIES CARDS) ===== */

#desserts .title-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

#desserts .price {
  background: #ff4d4d;
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
  width: auto;
  flex: 0 0 auto;
}

#desserts h3 {
  margin: 0;
}
/* FIX DESSERT PRICE POSITION */

#desserts .title-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}

#desserts .title-price h3 {
  margin: 0;
  flex: 1;
}

#desserts .price {
  background: #ff4d4d;
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
/* ===== PRICE BADGE STYLE ===== */

.menu-card {
  position: relative;
  overflow: hidden;
}

.price-badge {
  position: absolute;
  right: 15px;
  bottom: 15px;
  background: #ff4d2d;
  color: #fff;
  padding: 6px 12px;
  border-radius: 25px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}
/* ===== DESSERT GRID ===== */

#desserts .menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  margin-bottom: 30px;
}

/* ===== CARD ===== */

#desserts .menu-card {
  background: rgba(20, 20, 20, 0.85);
  border-radius: 12px;
  padding: 18px 20px;
}

/* ===== IMAGE CARDS ===== */

#desserts .image-card {
  padding: 0;
  overflow: hidden;
}

#desserts .image-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

#desserts .image-card .menu-content {
  padding: 16px 18px;
}
/* --- Global Styles --- */
body {
  background-color: #121212; /* Dark background like your laptop */
  font-family: "Inter", "Segoe UI", Roboto, sans-serif;
  color: #ffffff;
  margin: 0;
  padding: 20px;
}

/* --- Section Header --- */
.section-title {
  text-align: center;
  margin-bottom: 40px;
}

.section-title h2 {
  font-size: 2.5rem;
  color: #fff;
  margin-bottom: 10px;
}

.section-title p {
  color: #888;
  font-size: 1.1rem;
}

/* --- The Grid Layout --- */
.menu-grid {
  display: grid;
  /* This creates 2 columns on desktop, 1 on mobile */
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

/* --- The Card Styling --- */
.menu-card {
  background-color: #1e1e1e; /* Card background */
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #333;
  transition: background 0.3s ease;
}

.menu-card:hover {
  background-color: #252525;
}

/* Image handling (Top cards) */
.card-img-container img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* --- Content Layout --- */
.menu-content {
  padding: 20px;
}

.title-price {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Vertical alignment */
  margin-bottom: 12px;
}

.title-price h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}

/* Red Pill Price Tag - Exactly like the photo */
.price {
  background-color: #e63946; /* Royal Red */
  color: white;
  padding: 6px 14px;
  border-radius: 50px; /* Makes it a pill shape */
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 2px 8px rgba(230, 57, 70, 0.3);
}

.menu-content p {
  color: #a0a0a0; /* Muted gray for description */
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
  .menu-grid {
    grid-template-columns: 1fr; /* Single column on phones */
  }

  .section-title h2 {
    font-size: 2rem;
  }
}
/* Container for the whole dessert section */
#desserts {
  background: url("your-wood-background.jpg"); /* If you have the wood texture */
  padding: 40px 20px;
}

/* The Grid - 2 columns like your original photo */
.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* The Card */
.menu-card {
  background: rgba(30, 30, 30, 0.9); /* Dark semi-transparent */
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
}

/* Image styling */
.card-img-container img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Content Area */
.menu-content {
  padding: 15px 20px;
}

/* Title and Price Row - This fixes the badge position */
.title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.title-price h3 {
  margin: 0;
  color: #fff;
  font-size: 1.2rem;
}

/* Red Price Badge - Exactly like the Royal photo */
.price {
  background-color: #ff4d4d;
  color: white;
  padding: 4px 12px;
  border-radius: 8px; /* Rounded square/pill look */
  font-weight: bold;
  font-size: 0.9rem;
  white-space: nowrap;
}

.menu-content p {
  color: #ccc;
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.4;
}
/* ================= DESSERT MENU ================= */

#dessert-menu .menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  margin-bottom: 35px;
}

/* ===== CARD ===== */

#dessert-menu .menu-card {
  background: rgba(20, 20, 20, 0.85);
  border-radius: 12px;
  padding: 18px 20px;
}

/* ===== IMAGE CARDS ===== */

#dessert-menu .image-card {
  padding: 0;
  overflow: hidden;
}

#dessert-menu .image-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

#dessert-menu .image-card .menu-content {
  padding: 16px 18px;
}

/* ===== TITLE + PRICE ROW ===== */

#dessert-menu .title-price {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

#dessert-menu .title-price h3 {
  margin: 0;
  font-size: 16px;
  color: #fff;
  font-weight: 600;
}
/* ===== STABLE PRICE BADGE FIX ===== */

/* card ko positioning context do /
#dessert-menu .menu-card{
position: relative;
padding-bottom: 32px; / badge ke liye space */

/* title row normal hi rahe */
#dessert-menu .title-price {
  display: block;
}

/* price badge */
#dessert-menu .price {
  position: absolute;
  right: 14px;
  bottom: 10px;
  width: auto;
  background: #ff4d2d;
  color: #fff;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 600;
  display: inline-block;
}

/* image cards mein thoda upar rakho */
#dessert-menu .image-card .price {
  bottom: 14px;
}
/* ===== FORCE FIX PRICE BADGE ===== */

#dessert-menu .price {
  width: fit-content !important;
  display: inline-block !important;
  flex: none !important;
  margin-left: auto !important;
  padding: 4px 10px !important;
  background: #ff4d2d !important;
  color: #fff !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

#dessert-menu .title-price {
  display: flex !important;
  align-items: center;
}

#dessert-menu .menu-card p {
  display: block !important;
}
/* FIX DESSERT PRICE POSITION */

#desserts .title-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}

#desserts .title-price h3 {
  margin: 0;
  flex: 1;
}

#desserts .price {
  background: #ff4d4d;
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
/* ===== FORCE PRICE BADGE RIGHT FOR IMAGE CARDS ===== */

#desserts .image-card .menu-content {
  position: relative;
}

#desserts .image-card .price {
  position: absolute;
  right: 15px;
  bottom: 12px;
  background: #ff4d4d;
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
/* ===== FIX IMAGE DESSERT CARD PRICE ===== */

#desserts .image-card .menu-content {
  position: relative;
  padding-right: 70px; /* space for price badge */
}

#desserts .image-card .price {
  position: absolute;
  right: 16px;
  bottom: 14px;
  background: #ff4d4d;
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
/* IMAGE DESSERT CARD FIX */

#desserts .image-card .menu-content {
  position: relative;
  padding: 16px;
}

#desserts .image-card .price {
  position: absolute;
  right: 16px;
  bottom: 12px;
  background: #ff4d4d;
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
/* ===== IMAGE DESSERT PRICE ALIGNMENT ===== */

#desserts .image-card .menu-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#desserts .image-card .title-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

#desserts .image-card .title-price h3 {
  margin: 0;
  flex: 1;
}

#desserts .image-card .price {
  margin-left: auto;
  background: #ff4d4d;
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
/* ===== GLASS CARD EFFECT FOR KIDS MEALS + BEVERAGES ===== */

#kids-meals .menu-card,
#beverages .menu-card {
  background: rgba(30, 30, 30, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 14px;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);

  transition: all 0.3s ease;
}

/* hover effect */

#kids-meals .menu-card:hover,
#beverages .menu-card:hover {
  background: rgba(30, 30, 30, 0.7);

  transform: translateY(-3px);

  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45);
}
/* ===== FIX PRICE BADGE FOR IMAGE CARDS (LIKE CHEESESTEAK) ===== */

#desserts .image-card .menu-content {
  position: relative;
  padding: 16px;
}

#desserts .image-card .price {
  position: absolute;
  right: 18px;
  top: 18px; /* same vertical level as title */
  background: #ff4d4d;
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

/* keep description below */
#desserts .image-card p {
  margin-top: 6px;
}
/* ===== IMAGE CARD TEXT FIX ===== */

#desserts .image-card .menu-content {
  display: block;
  position: relative;
  padding: 14px 16px;
}

/* title + price same row */

#desserts .image-card .title-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

/* price badge */

#desserts .image-card .price {
  background: #ff4d4d;
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
/* ===== GRID ===== */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* ===== CARD BASE ===== */
.menu-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #111;
}

/* ===== IMAGE FIX ===== */
.menu-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* ===== TEXT SECTION ===== */
.menu-content {
  background: #1c1c1c;
  padding: 15px;
}

.menu-content h3 {
  margin: 0 0 6px;
  font-size: 16px;
  color: #fff;
}

.menu-content p {
  margin: 0;
  font-size: 13px;
  color: #ccc;
  line-height: 1.4;
}

/* ===== PRICE BADGE (MAIN FIX) ===== */
.price-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;

  background: #ff5a3c;
  color: #fff;

  font-size: 13px;
  font-weight: 600;

  padding: 6px 12px;
  border-radius: 20px;

  z-index: 5;
}

/* ===== MOBILE FIX ===== */
@media (max-width: 768px) {
  .menu-grid {
    grid-template-columns: 1fr;
  }

  .menu-card img {
    height: 180px;
  }
}
/* ❌ OLD PRICE RESET (IMPORTANT) */
.price {
  all: unset;
}

/* ✅ NEW PRICE BADGE */
.price-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;

  background: #ff5a3c;
  color: #fff;

  font-size: 13px;
  font-weight: 600;

  padding: 6px 12px;
  border-radius: 20px;

  width: auto;
  display: inline-block;

  z-index: 10;
}

/* ❌ REMOVE ANY FLEX FROM OLD WRAPPER */
.title-price {
  all: unset;
}
/* ===== FORCE FIX PRICE BADGE ===== */
.menu-card .price-badge {
  position: absolute !important;
  bottom: 12px !important;
  right: 12px !important;

  background: #ff5a3c !important;
  color: #fff !important;

  padding: 5px 12px !important;
  border-radius: 20px !important;

  font-size: 13px !important;
  font-weight: 600 !important;

  width: fit-content !important;
  max-width: max-content !important;

  display: inline-block !important;
  white-space: nowrap !important;

  z-index: 999 !important;
}

/* 🚨 REMOVE STRETCHING ISSUE */
.menu-card .price,
.menu-card .title-price {
  display: block !important;
  width: auto !important;
  background: none !important;
  padding: 0 !important;
}
/* ===== IMAGE CARD SAME AS NORMAL CARD ===== */
.image-card .menu-content {
  position: relative;
  padding-right: 80px; /* space for price */
}

/* ===== PRICE SAME POSITION AS SECOND IMAGE ===== */
.image-card .price-badge {
  position: absolute;
  right: 15px;
  bottom: 15px;

  background: #ff5a3c;
  color: #fff;

  padding: 5px 12px;
  border-radius: 20px;

  font-size: 13px;
  font-weight: 600;

  white-space: nowrap;
}

/* ===== REMOVE IMAGE OVERLAY ISSUE ===== */
.image-card {
  display: block;
}

.image-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
/* ===== GLASS CARD EFFECT ===== */
.menu-card {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
}

/* ===== TEXT AREA CLEAN ===== */
.menu-content {
  position: relative;
  padding: 15px 80px 15px 15px; /* right space for badge */
  background: rgba(0, 0, 0, 0.6); /* slight dark overlay */
}

/* ===== 🔥 PERFECT PRICE POSITION ===== */
.price-badge {
  position: absolute !important;
  right: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  background: linear-gradient(135deg, #ff5a3c, #ff7a5c);
  color: #fff;

  padding: 6px 14px;
  border-radius: 999px;

  font-size: 13px;
  font-weight: 600;

  white-space: nowrap;
  z-index: 10;
}

/* ===== IMAGE CLEAN ===== */
.menu-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* ===== HOVER (OPTIONAL BUT NICE) ===== */
.menu-card:hover {
  transform: translateY(-4px);
  transition: 0.3s ease;
}
/* ===== 🔥 FORCE FIX ALL PRICE BADGES ===== */
.menu-card {
  position: relative !important;
}

/* REMOVE ANY CENTER/STRETCH */
.menu-card .price,
.menu-card .title-price {
  all: unset !important;
}

/* FINAL BADGE STYLE */
.menu-card .price-badge {
  position: absolute !important;
  right: 12px !important;
  bottom: 12px !important;

  top: auto !important;
  left: auto !important;
  transform: none !important;

  display: inline-block !important;
  width: auto !important;
  max-width: max-content !important;

  padding: 5px 12px !important;
  border-radius: 20px !important;

  background: #ff5a3c !important;
  color: #fff !important;

  font-size: 13px !important;
  font-weight: 600 !important;

  white-space: nowrap !important;

  z-index: 999 !important;
}

/* EXTRA SAFETY (in case flex causing issue) */
.menu-content {
  position: relative !important;
  padding-right: 70px !important;
}
/* ===== TEXT CARD FIX ===== */
.menu-card:not(.image-card) .menu-content {
  position: relative !important;
  padding-right: 80px !important; /* space for badge */
}

/* ===== PRICE BADGE ALIGN (TEXT CARDS) ===== */
.menu-card:not(.image-card) .price-badge {
  position: absolute !important;
  right: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  background: #ff5a3c !important;
  color: #fff !important;

  padding: 5px 12px !important;
  border-radius: 20px !important;

  font-size: 13px !important;
  font-weight: 600 !important;

  white-space: nowrap !important;
}
/* ===== TEXT CARDS ONLY FIX ===== */
.menu-card:not(.image-card) .title-price {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* ===== PRICE STYLE (TEXT CARDS ONLY) ===== */
.menu-card:not(.image-card) .price {
  background: #ff5a3c !important;
  color: #fff !important;

  padding: 5px 12px !important;
  border-radius: 20px !important;

  font-size: 13px !important;
  font-weight: 600 !important;

  white-space: nowrap !important;

  display: inline-block !important;
  width: auto !important;
}
/* ===== FORCE TEXT CARD LAYOUT ===== */
.menu-card:not(.image-card) .title-price {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 10px;
}

/* ===== FORCE PRICE RIGHT ===== */
.menu-card:not(.image-card) .price {
  justify-self: end !important;

  background: #ff5a3c !important;
  color: #fff !important;

  padding: 5px 12px !important;
  border-radius: 20px !important;

  font-size: 13px !important;
  font-weight: 600 !important;

  white-space: nowrap !important;

  display: inline-block !important;
  width: auto !important;
}
/* ===== FORCE QUESADILLA STYLE (NO GLASS) ===== */

#kids-meals .menu-card,
#beverages .menu-card {
  background: #1a1a1a !important; /* solid dark */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  border: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

/* remove any overlay/gradient issues */

#kids-meals .menu-card::before,
#beverages .menu-card::before {
  display: none !important;
}
/* ===== EXACT QUESADILLA STYLE ===== */

#kids-meals .menu-card,
#beverages .menu-card {
  background: rgba(20, 20, 20, 0.6) !important; /* same feel */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  border-radius: 14px;
  padding: 18px 22px;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);

  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* remove any glass/overlay */

#kids-meals .menu-card::before,
#beverages .menu-card::before {
  display: none !important;
}
/* ===== ROYAL CHEF PLATTER → QUESADILLA STYLE ===== */

#royal-chef-platter .menu-card,
.menu-section .menu-card {
  background: rgba(20, 20, 20, 0.6) !important; /* same as quesadilla */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  border-radius: 14px;
  padding: 18px 22px;

  border: 1px solid rgba(255, 255, 255, 0.05);

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* remove any unwanted overlays */

.menu-card::before {
  display: none !important;
}
/* ===== QUESADILLA FINAL PERFECT FIX ===== */

#quesadillas .menu-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  background: rgba(20, 20, 20, 0.6) !important;

  border-radius: 14px;
  padding: 18px 22px;

  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* text side */

#quesadillas .menu-info {
  max-width: 80%;
}

#quesadillas h3 {
  margin-bottom: 4px;
  font-size: 18px;
}

#quesadillas p {
  margin: 0;
  font-size: 14px;
  color: #ccc;
}

/* price badge */

#quesadillas .menu-price {
  margin-left: auto;

  background: #e63946;
  color: #fff;

  padding: 6px 16px;
  border-radius: 20px;

  font-size: 14px;
  font-weight: 600;

  white-space: nowrap;
}

/* REMOVE ANY OVERLAY / GLASS */

#quesadillas .menu-card::before {
  display: none !important;
}
/* ===== 💣 NUCLEAR TEXT CARD FIX ===== */

/* kill everything inside title-price */
.menu-card:not(.image-card) .title-price {
  all: unset !important;

  display: flex !important;
  align-items: center !important;
}

/* force title left */
.menu-card:not(.image-card) .title-price h3 {
  margin: 0 !important;
}

/* FORCE PRICE TO EXTREME RIGHT */
.menu-card:not(.image-card) .title-price .price {
  all: unset !important;

  margin-left: auto !important; /* 🔥 MAIN MAGIC */

  background: #ff5a3c !important;
  color: #fff !important;

  padding: 5px 12px !important;
  border-radius: 20px !important;

  font-size: 13px !important;
  font-weight: 600 !important;

  white-space: nowrap !important;

  display: inline-block !important;
}
/* ===== QUESADILLA FINAL CLEAN FIX ===== */

#quesadillas .menu-card {
  position: relative;
  z-index: 2;

  background: rgba(20, 20, 20, 0.6) !important;
  border-radius: 14px;
  padding: 18px 22px;

  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* REMOVE ALL OVERLAYS */

#quesadillas .menu-card::before,
#quesadillas .menu-card::after {
  display: none !important;
  content: none !important;
}

/* also kill parent overlays if any */

#quesadillas::before,
#quesadillas::after {
  display: none !important;
}
/* ===== FORCE ALL TEXT SECTIONS TO CARD STYLE ===== */

#quesadillas .menu-container,
#burritos .menu-container {
  display: flex !important;
  flex-direction: column;
  gap: 16px;
}

#quesadillas .menu-card,
#burritos .menu-card {
  display: flex !important;
  justify-content: space-between;
  align-items: flex-start;

  background: rgba(20, 20, 20, 0.6) !important;

  padding: 18px 22px;
  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* text */

#quesadillas .menu-info,
#burritos .menu-info {
  max-width: 80%;
}

#quesadillas p,
#burritos p {
  margin: 0;
  font-size: 14px;
  color: #ccc;
}

/* price */

#quesadillas .menu-price,
#burritos .menu-price {
  margin-left: auto;

  background: #e63946;
  color: #fff;

  padding: 6px 16px;
  border-radius: 20px;

  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* REMOVE ANY WEIRD OVERLAY */

.menu-card::before,
.menu-card::after {
  display: none !important;
}
/* ===== TEXT CARD FINAL SYSTEM ===== */
.text-card {
  position: relative;
  padding: 15px 90px 15px 15px;
}

.text-card h3 {
  margin: 0 0 5px;
}

.text-card p {
  margin: 0;
  font-size: 13px;
  color: #ccc;
}

/* PERFECT RIGHT BADGE */
.text-card .price {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);

  background: #ff5a3c;
  color: #fff;

  padding: 5px 12px;
  border-radius: 20px;

  font-size: 13px;
  font-weight: 600;

  white-space: nowrap;
}
/* FIX TITLE + PRICE ALIGNMENT */

.menu-card .title-price {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100%;
}

/* PRICE BADGE RIGHT SIDE */

.menu-card .title-price span {
  margin-left: auto !important;
  background: #e74c3c !important;
  color: #fff !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: inline-block !important;
}

/* REMOVE ANY CENTER / BLOCK BREAK */

.menu-card span {
  display: inline-block !important;
}
/* ===== 💯 GREEK + WRAPS FIX ===== */

/* fix layout */
.greek-card .title-price,
.wrap-card .title-price {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

/* push price to right */
.greek-card .title-price span,
.wrap-card .title-price span {
  margin-left: auto !important;

  background: #ff5a3c !important;
  color: #fff !important;

  padding: 5px 12px !important;
  border-radius: 20px !important;

  font-size: 13px !important;
  font-weight: 600 !important;

  white-space: nowrap !important;
  display: inline-block !important;
}
/* ===== 📱 DESSERTS MOBILE VIEW ===== */
@media (max-width: 768px) {
  /* single column */
  #desserts .menu-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* card spacing */
  #desserts .menu-card {
    border-radius: 14px;
  }

  /* image height fix */
  #desserts .menu-card img {
    height: 180px;
    object-fit: cover;
  }

  /* text spacing */
  #desserts .menu-content {
    padding: 12px;
  }

  #desserts h3 {
    font-size: 15px;
  }

  #desserts p {
    font-size: 12px;
  }

  /* 🔥 badge mobile adjust */
  #desserts .price-badge {
    bottom: 10px;
    right: 10px;
    font-size: 12px;
    padding: 4px 10px;
  }

  /* text cards badge */
  #desserts .text-card .price {
    right: 10px;
    font-size: 12px;
    padding: 4px 10px;
  }
}
/* ===== CATEGORY GRID FIX (HOME PAGE) ===== */

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  padding: 40px 20px;
  max-width: 1100px;
  margin: auto;
}

.category-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

.category-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}

/* TEXT OVER IMAGE */
.category-card h3 {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.6);
  padding: 6px 14px;
  border-radius: 20px;
}

/* REMOVE WEIRD EXTRA SPACING */
.category-card * {
  margin: 0;
}
/* ===== FINAL UNIVERSAL FIX ===== */

/* REMOVE SIDE GAPS */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  overflow-x: hidden;
}

/* FORCE FULL WIDTH */
section,
.menu-section,
.hero,
footer {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* FIX CONTAINER SHRINK ISSUE */
.container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

/* FIX IMAGE BREAK */
img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* FIX TITLE + PRICE */
.title-price {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100%;
}

/* FIX PRICE BADGE */
.title-price span {
  margin-left: auto !important;
  display: inline-block !important;
}

/* ===== FOOTER ICON FIX ===== */

.footer-icons {
  display: flex !important;
  justify-content: center !important;
  gap: 20px !important;
  margin-top: 20px;
}

.footer-icons i {
  display: inline-block !important;
  font-size: 20px !important;
  color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ===== REMOVE ANY BROKEN GLOBAL STYLES ===== */

* {
  box-sizing: border-box;
}
/* ===== FORCE SHOW FOOTER ICONS EVERYWHERE ===== */

.footer-social,
.footer-icons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 18px !important;
  margin-top: 20px !important;
}

/* FORCE ICON VISIBILITY */
.footer-social a i,
.footer-icons a i {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 22px !important;
  color: #ffffff !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

/* BRAND ICON FIX */
.footer-social a i.fa-brands,
.footer-icons a i.fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

/* REMOVE ANY GLOBAL BREAK */
i {
  display: inline-block !important;
}

/* CLICK AREA */
.footer-social a,
.footer-icons a {
  text-decoration: none;
}

/* DEBUG BORDER (optional remove later) */
/*
.footer-social a i{
border:1px solid red;
}
*/
/* ===== FORCE FONT AWESOME BACK ===== */

/* RESET ICON ELEMENT */
.footer-social i,
.footer-icons i {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  display: inline-block !important;
  font-size: 22px !important;
  color: #fff !important;
}

/* BRAND ICONS FIX */
.footer-social i.fa-brands,
.footer-icons i.fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

/* VERY IMPORTANT: REMOVE BROKEN GLOBAL RULE */
i {
  font-family: "Font Awesome 6 Free" !important;
}
/* ===== FIX BIG IMAGES + HORIZONTAL SCROLL ===== */

/* SECTION ko horizontal scroll banado */
.menu-grid {
  display: flex !important;
  overflow-x: auto !important;
  gap: 15px !important;
  padding: 10px 15px !important;
  scroll-behavior: smooth;
}

.menu-grid::-webkit-scrollbar {
  display: none;
}

/* CARDS size control */
.menu-card {
  flex: 0 0 auto !important;
  width: 130px !important;
  border-radius: 12px;
  overflow: hidden;
}

/* IMAGE fix */
.menu-card img {
  width: 100% !important;
  height: 90px !important;
  object-fit: cover !important;
  display: block;
}

/* TEXT fix */
.menu-card h3 {
  font-size: 14px !important;
  text-align: center;
  margin: 6px 0;
}

/* REMOVE PAGE SCROLL ISSUE */
body {
  overflow-x: hidden;
}
/* ===== 📱 GLOBAL MOBILE FIX ===== */
@media (max-width: 768px) {
  /* ===== ALL GRIDS → 1 COLUMN ===== */
  .menu-grid,
  .wrap-grid,
  .greek-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* ===== CARD SPACING ===== */
  .menu-card,
  .wrap-card,
  .greek-card {
    padding: 14px !important;
    border-radius: 14px;
  }

  /* ===== IMAGE CARDS FIX ===== */
  .menu-card img {
    height: 180px;
    object-fit: cover;
  }

  /* ===== TEXT SIZE ===== */
  h3 {
    font-size: 15px !important;
  }

  p {
    font-size: 12px !important;
  }

  /* ===== 🔥 REMOVE FULL WIDTH RED BAR ===== */
  .menu-price {
    width: fit-content !important;
    max-width: max-content !important;

    padding: 5px 12px !important;
    border-radius: 20px !important;

    display: inline-block !important;
  }

  /* ===== FIX PRICE POSITION (TEXT CARDS) ===== */
  .title-price span,
  .menu-price {
    margin-left: auto !important;
  }

  /* ===== IMAGE CARD BADGE ===== */
  .price-badge {
    bottom: 10px !important;
    right: 10px !important;
    font-size: 12px;
  }
}
/* ===== 📱 FINAL DESSERT MOBILE (1 CARD CLEAN) ===== */
@media (max-width: 768px) {
  /* 1 card per row */
  #desserts .menu-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* full width card */
  #desserts .menu-card {
    width: 100% !important;
  }

  /* image proper */
  #desserts .menu-card img {
    height: 180px;
    object-fit: cover;
  }

  /* TEXT NORMAL (IMPORTANT FIX) */
  #desserts .menu-content {
    display: block !important;
    width: 100% !important;
    padding: 14px !important;
  }

  #desserts .menu-content h3 {
    font-size: 16px;
    line-height: 1.3;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  #desserts .menu-content p {
    font-size: 13px;
    line-height: 1.4;
  }

  /* badge */
  #desserts .price-badge {
    bottom: 10px;
    right: 10px;
  }
}
/* ===== ONLY MOBILE HORIZONTAL SCROLL ===== */

@media (max-width: 768px) {
  .menu-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    scroll-behavior: smooth;
  }

  .menu-grid::-webkit-scrollbar {
    display: none;
  }

  .menu-card {
    flex: 0 0 auto !important;
    width: 140px !important;
  }

  .menu-card img {
    height: 95px !important;
    object-fit: cover !important;
  }
}
/* ===== 2 COLUMN GRID (LIKE YOUR 4TH PIC) ===== */

.menu-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
  padding: 10px 12px !important;
}

/* CARD FIX */
.menu-card {
  width: 100% !important;
  border-radius: 14px;
  padding: 14px;
}

/* TEXT */
.menu-card h3 {
  font-size: 15px;
  margin-bottom: 6px;
}

/* DESCRIPTION */
.menu-card p {
  font-size: 13px;
  line-height: 1.4;
}

/* PRICE */
.menu-card .price,
.menu-card span {
  font-size: 14px;
  padding: 6px 12px;
}

/* REMOVE ANY SCROLL */
body {
  overflow-x: hidden;
}
/* ===== QUICK FIX (ALL CARDS PERFECT) ===== */

.menu-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  padding: 10px !important;
}

.menu-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 170px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.65);
}

/* IMAGE FIX */
.menu-card img {
  width: 100%;
  height: 85px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 6px;
}

/* TEXT FIX */
.menu-card h3 {
  font-size: 14px;
  margin: 4px 0;
}

.menu-card p {
  font-size: 12px;
  opacity: 0.8;
}

/* PRICE FIX */
.menu-card .price,
.menu-card span {
  margin-top: auto;
  align-self: flex-start;
  font-size: 12.5px;
  padding: 5px 10px;
}

/* NO SIDE SCROLL */
body {
  overflow-x: hidden;
}
/* ===== TOP MENU HORIZONTAL SCROLL ===== */

.menu-grid:first-of-type {
  display: flex !important;
  overflow-x: auto;
  gap: 14px;
  padding: 10px 12px;
  scroll-snap-type: x mandatory;
}

/* cards ko line me rakho */
.menu-grid:first-of-type .menu-card {
  min-width: 140px;
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* image size */
.menu-grid:first-of-type img {
  height: 100px;
}

/* scrollbar hide (mobile clean look) */
.menu-grid:first-of-type::-webkit-scrollbar {
  display: none;
}
/* ===== PERFECT TITLE + PRICE ALIGNMENT ===== */

.menu-card.image-card .menu-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

  padding: 14px 16px;

  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95),
    rgba(0, 0, 0, 0.7),
    transparent
  );

  /* IMPORTANT */
  display: flex;
  flex-direction: column;
}

/* TOP ROW (TITLE + PRICE SAME LINE) */

.menu-card.image-card h3 {
  margin: 0;
  font-size: 17px;
  color: #fff;
  font-weight: 600;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* DESCRIPTION */

.menu-card.image-card p {
  margin-top: 4px;
  font-size: 13px;
  color: #ccc;
}

/* PRICE PERFECT RIGHT */

.menu-card.image-card .menu-price {
  position: absolute;
  right: 14px;
  bottom: 16px;

  background: #e63946;
  color: #fff;

  padding: 6px 14px;
  border-radius: 20px;

  font-size: 13px;
  font-weight: 600;
}
/* ===== MOBILE: 1 CARD PER ROW ===== */

@media (max-width: 768px) {
  .menu-grid {
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  .menu-card {
    width: 100%;
  }

  /* thoda better spacing */

  .menu-section {
    padding: 20px 14px;
  }
}
/* ===== TEXT-ONLY CARDS SIZE FIX ===== */

/* jo cards me image nahi hai */
.menu-card:not(.image-card) {
  padding: 14px 16px !important;
  min-height: auto !important;
  height: auto !important;

  /* important */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* title spacing */
.menu-card:not(.image-card) h3 {
  margin-bottom: 4px;
  font-size: 16px;
}

/* description compact */
.menu-card:not(.image-card) p {
  font-size: 13px;
  line-height: 1.3;
  margin-bottom: 6px;
  max-width: 90%;
}

/* price position */
.menu-card:not(.image-card) .menu-price {
  position: absolute;
  right: 12px;
  bottom: 12px;
}
/* ===== SECTION DESCRIPTION FIX (MOBILE) ===== */

@media (max-width: 768px) {
  .section-title {
    padding: 0 16px !important;
    text-align: center;
  }

  .section-title p {
    font-size: 14px;
    line-height: 1.5;

    max-width: 100%;
    width: 100%;

    white-space: normal;
    word-break: break-word;

    margin: 8px auto 0;
    padding: 0 4px;

    overflow: visible;
  }
}
/* ===== CTA SECTION ===== */

.royal-order-cta {
  padding: 60px 20px;
}

.royal-order-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;

  max-width: 1200px;
  margin: auto;
}

/* LEFT SIDE */

.order-left {
  flex: 1;
}

.order-left h2 {
  font-size: 36px;
  margin-bottom: 12px;
}

.order-left p {
  font-size: 15px;
  line-height: 1.6;
  color: #ccc;
  margin-bottom: 10px;
}

/* RIGHT SIDE */

.order-right {
  flex: 1;
  text-align: right;
}

.order-right h3 {
  font-size: 28px;
  margin-bottom: 10px;
}

.order-address,
.order-hours {
  font-size: 14px;
  color: #ccc;
  margin-bottom: 8px;
}

/* BUTTON */

.order-btn {
  display: inline-block;
  margin-top: 15px;

  background: #0f5f2e;
  color: #fff;

  padding: 14px 30px;
  border-radius: 30px;

  font-weight: 600;
  text-decoration: none;

  transition: 0.3s;
}

.order-btn:hover {
  background: #147a3b;
}

/* ===== TESTIMONIAL SECTION ===== */

.testimonial-section {
  margin-top: 40px;
  padding: 40px 20px;

  background: #000;
  border-radius: 20px;
  text-align: center;
}

.testimonial-section h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #ccc;
}

/* stars */

.testimonial-stars {
  margin-bottom: 15px;
}

.testimonial-stars span {
  color: #c89b3c;
  font-size: 18px;
  margin: 0 3px;
}

/* text */

.testimonial-text {
  font-size: 14px;
  color: #aaa;
  max-width: 600px;
  margin: 0 auto 10px;
  line-height: 1.5;
}

/* author */

.testimonial-author {
  font-size: 13px;
  color: #777;
}

/* ===== MOBILE RESPONSIVE ===== */

@media (max-width: 768px) {
  .royal-order-container {
    flex-direction: column;
    text-align: left;
    gap: 20px;
  }

  /* LEFT */

  .order-left h2 {
    font-size: 28px;
  }

  .order-left p {
    font-size: 14px;
  }

  /* RIGHT */

  .order-right {
    text-align: left;
  }

  .order-right h3 {
    font-size: 22px;
  }

  /* BUTTON FULL WIDTH */

  .order-btn {
    width: 100%;
    text-align: center;
    padding: 14px;
  }

  /* testimonial */

  .testimonial-section {
    padding: 25px 15px;
  }

  .testimonial-text {
    font-size: 13px;
  }
}
/* ===== FIX BLACK BOX (IMAGE + CONTENT) ===== */

.testimonial-section {
  background: rgba(0, 0, 0, 0.85); /* pure black hata ke soft overlay */
  border-radius: 20px;

  padding: 40px 20px;
  margin: 40px 20px;

  text-align: center;
  position: relative;
  overflow: hidden;
}

/* LOGO IMAGE FIX */

.testimonial-section img {
  max-width: 180px;
  margin-bottom: 20px;
  border-radius: 10px;
}

/* HEADING */

.testimonial-section h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #ddd;
}

/* STARS */

.testimonial-stars {
  margin: 10px 0 15px;
}

.testimonial-stars span {
  color: #d4a437;
  font-size: 18px;
  margin: 0 3px;
}

/* TEXT */

.testimonial-text {
  font-size: 14px;
  color: #bbb;
  line-height: 1.6;
  max-width: 500px;
  margin: 0 auto 10px;
}

/* AUTHOR */

.testimonial-author {
  font-size: 13px;
  color: #888;
}

/* REMOVE EXTRA EMPTY BOXES (jo neeche dikh rahe hain) */

.testimonial-section .boxes,
.testimonial-section .extra-box {
  display: none;
}

/* ===== MOBILE FIX ===== */

@media (max-width: 768px) {
  .testimonial-section {
    padding: 25px 15px;
    margin: 30px 10px;
  }

  .testimonial-text {
    font-size: 13px;
  }

  .testimonial-section img {
    max-width: 140px;
  }
}